useState est un hook React qui vous permet d'ajouter un état à vos composants en renvoyant un tableau avec deux variables : state, setState. L'état actuel et la fonction qui devient la fonction setter lorsqu'elle est appelée. Il peut être utilisé pour suivre des données ou des propriétés qui doivent être suivies dans une application, telles que des chaînes, des nombres, des booléens, des tableaux ou des objets.
Exemple:

const [state, setState] = useState();

En termes simples, l'état changera à tout moment et doit être mis à jour, donc 'setState' mettra à jour l'état, déclenchant un nouveau rendu de vos composants au fil du temps.

De plus, useState peut contenir tout type de valeur Javascript, y compris des objets. Quelque chose à garder TOUJOURS à l’esprit est que vous ne devez jamais modifier directement les objets que vous détenez dans l’état React. Tout d’abord, vous devez en créer un nouveau ou créer une copie d’un existant, puis définir State sur la nouvelle copie. Par exemple:

// Objects
const [state, setState] = useState({name: 'Marlo', age: 56});

const updateName = () => {
  setState({...state, name: 'Karlo'});
};

const updateAge = () => {
  setState({...state, age: 96});
};
---------------------------------------------------------------------------------
// Arrays
const [array, setArray] = useState([1, 2, 3, 4, 5]);

const addItem = () => {
  setArray([...array, 6]);
};

const removeItem = () => {
  setArray(array.slice(0, array.length - 1));
};

Pour utiliser useState dans un composant React, vous devez d'abord l'importer depuis React en écrivant le code suivant en haut de la page du composant de deux manières différentes, les deux fonctionnent parfaitement pour que vous puissiez choisir votre poison.

import React from 'react'; 
import {useState} from 'react';

ou vous pouvez écrire sur une seule ligne

import React, {useState} from 'react';

React Hook useState peut être appelé au niveau supérieur d'un composant ou dans des hooks personnalisés, mais pas à l'intérieur de boucles ou de conditions.

const [initialState, setInitialState] = useState();

l'état initial n'est utilisé que lors du rendu initial et sera ignoré dans les rendus suivants.
La fonction initialState est passée à la fonction setInitialState, elle prend l'état précédent comme argument et renvoie un newState.

De plus, à mon avis, il n'y a pas de règles spéciales quant aux endroits où vous pouvez et ne pouvez pas utiliser les Hooks dans React. Bien sûr, vous devez être prudent et tactique pour garder votre code organisé.

Dans l'un de mes projets, la création d'un SPA (Single Page App), il y avait différents composants pour atteindre mon objectif. Le secret pour être bien organisé est de garder une trace de vos composants. Par exemple, votre composant App.js utilisera {useState} en fonction du type de données à mettre à jour.
Présentons un autre hook puissant de React appelé : {useEffect} et utilisons-le avec {useState} pour expliquer comment ces hooks effectuent des opérations sur les données. L'exemple suivant provient de mon composant App.js que j'ai utilisé dans un projet récent. Je travaillais avec un fichier de données db.json pour les jouets qui aideront le développement des enfants pendant la première année. Il s'agit de mon point de terminaison http://localhost:4000/toys pour vous aider à comprendre le processus de fonctionnement de {useState} et {useEffect} à l'intérieur d'un composant d'application.

Premier : Initialiser l'état :

const [toys, setToys] = useState([]);

• Cette ligne initialise une variable d'état jouets avec un tableau vide [] comme valeur initiale.
• setToys est une fonction qui sera utilisée pour mettre à jour l'état des jouets.

Deuxième : Récupérer les données sur le montage du composant :

useEffect(() => {             
    fetch("http://localhost:4000/toys")  
      .then(response => response.json())
      .then(data => setToys(data)); 
  }, []);

• Le hook {useEffect} est utilisé pour effectuer des effets secondaires dans le composant.
• La fonction à l'intérieur de {useEffect} s'exécutera une fois lors du montage du composant car le tableau de dépendances ([]) est vide.

Troisième : Récupérer les données sur les jouets :

• récupérer ("http://localhost:4000/toys")
  • Cette ligne envoie une requête GET à l'URL spécifiée pour récupérer les données des jouets.
• .then(réponse => réponse.json())
  • la réponse de la requête d'extraction est convertie au format JSON.
• .then(toysData => setToyData(toysData));
  • Les données JSON (toysData) sont utilisées pour mettre à jour l'état des jouets à l'aide de la fonction setToys.

Pour comprendre plus en profondeur le fonctionnement des deux {useState, useEffect}, vous pouvez visiter le site Web officiel de React. De plus, une autre source utile est le site Web w3schools, qui est mon préféré. Cela va droit au but avec des exemples que vous pouvez essayer dans votre propre navigateur. Enfin, si vous avez besoin d'une source plus technique, les documents Web mdn vous aideront.