web-dev-qa-db-fra.com

UseState est-il synchrone?

Dans le passé, nous avons été explicitement avertis que l'appel de setState({myProperty}) est asynchrone, et la valeur de this.state.myProperty N'est valide que lors du rappel, ou jusqu'à la prochaine render() méthode.

Avec useState, comment puis-je obtenir la valeur de l'état après l'avoir explicitement mis à jour?

Comment cela fonctionne-t-il avec les crochets? Pour autant que je sache, la fonction setter de useState ne prend pas de rappel, par ex.

const [value, setValue] = useState(0);
setValue(42, () => console.log('hi callback');

n'entraîne pas l'exécution du rappel.

Mon autre solution de contournement dans l'ancien monde est de bloquer une variable d'instance (e.g. this.otherProperty = 42) Sur la classe, mais cela ne fonctionne pas ici, car il n'y a pas d'instance de fonction à réutiliser (pas de this en mode strict ).

javascriptreactjsreact-hooks
50
AnilRedshift

Vous pouvez utiliser useEffect pour accéder au dernier état après sa mise à jour. Si vous avez plusieurs hooks d'état et souhaitez suivre la mise à jour sur une partie seulement d'entre eux, vous pouvez passer l'état dans un tableau comme deuxième argument de la fonction useEffect:

useEffect(() => { console.log(state1, state2)}, [state1])

Le useEffect ci-dessus ne sera appelé que lorsque state1 est mis à jour et vous ne devez pas faire confiance au state2 valeur de l'intérieur de cette fonction car il ne s'agit peut-être pas de la dernière.

Si vous êtes curieux de savoir si la fonction de mise à jour créée par useState est synchrone, c'est-à-dire si React lance la mise à jour de l'état lors de l'utilisation de hooks, cette réponse fournit un aperçu.

34
Claire Lin

Eh bien, si vous vous référez aux documents pertinents , vous trouverez ...

const [state, setState] = useState(initialState);

Renvoie une valeur avec état et une fonction pour la mettre à jour.

Pendant le rendu initial, l'état (état) retourné est le même que la valeur passée comme premier argument (initialState).

La fonction setState est utilisée pour mettre à jour l'état. Il accepte une nouvelle valeur d'état et met en file d'attente un nouveau rendu du composant.

setState(newState);

Lors des rendus ultérieurs, la première valeur renvoyée par useState sera toujours l'état le plus récent après l'application des mises à jour.

Donc, votre nouvel état, quel qu'il soit, est ce que vous venez de définir dans useState, c'est-à-dire la valeur de initialState. Il va directement à state, qui se met à jour de manière réactive par la suite. Citant davantage les documents pertinents :

Que fait l'appel useState? Il déclare une "variable d'état". Notre variable s'appelle count mais nous pourrions l'appeler n'importe quoi d'autre, comme banane. C'est une façon de "conserver" certaines valeurs entre les appels de fonction - useState est une nouvelle façon d'utiliser exactement les mêmes capacités que this.state fournit dans une classe. Normalement, les variables "disparaissent" lorsque la fonction se termine mais les variables d'état sont préservées par React.

Si vous souhaitez faire quelque chose chaque fois que votre état est mis à jour, utilisez simplement componentDidUpdate.(documents)

3
benas