Comment utiliser le callback `setState` sur les react hooks ?

Question

React hooks introduit useState pour définir l'état des composants. Mais comment puis-je utiliser les hooks pour remplacer le callback comme le code ci-dessous :

setState(
  { name: "Michael" },
  () => console.log(this.state)
);

Je veux faire quelque chose après la mise à jour de l'état.

Je sais que je peux utiliser useEffect pour faire les choses supplémentaires mais je dois vérifier l'état de la valeur précédente ce qui nécessite un peu de code. Je cherche une solution simple qui peut être utilisée avec le logiciel useState crochet.

Answer 1

Que dites-vous de ça ?

const [Name, setName] = useState("");
...
onClick={()=>{
setName("Michael")
setName(prevName=>{...}) //prevName is Michael?
}}

Answer 2

UseEffect est la principale solution. Mais comme Darryl l'a mentionné, l'utilisation de useEffect et le passage de l'état comme second paramètre ont un défaut, le composant s'exécutera lors du processus d'initialisation. Si vous voulez simplement que la fonction de rappel s'exécute en utilisant la valeur de l'état mis à jour, vous pouvez définir une constante locale et l'utiliser à la fois dans le setState et le rappel.

const [counter, setCounter] = useState(0);

const doSomething = () => {
  const updatedNumber = 123;
  setCounter(updatedNumber);

  // now you can "do something" with updatedNumber and don't have to worry about the async nature of setState!
  console.log(updatedNumber);
}