Changer de multiples états dans réagir JS Usestate ()

Définition d'un état est aussi asynchrone dans la nature SO -

const [x, setX] = useState(0)
const [y, setY] = useState(x) // this is just to initialize an initial value to your state y so it will be once set to the value of x and then it doesn't depends on x//

const handlerFunction = () => {
  setX(x+1)
  setY(y+1)
}

Rien ne fonctionne jamais simultanément dans JavaScript *, de sorte que les mises à jour de l'état se produisent l'une après l'autre. Mais comme ils sont tous deux faits de manière asynchrone, vous ne verrez pas X ou y jusqu'à ce que le prochain rendu, il apparaisse donc simultanément de votre perspective.

Dans les trois cas ci-dessus, les valeurs finales de x et y après appel handlerfunction () une fois 1 et 1.

Notez également que parce que x et y sont simplement des variables, leurs valeurs ne peuvent pas changer de manière synchrone de toute façon, c'est pourquoi vous ne voyez que Leur mise à jour des valeurs dans le prochain rendu.

Tout ce que vous êtes au courant, c'est une bonne pratique d'utiliser Mises à jour fonctionnelles Lorsque votre état change sur l'état précédent: xxx

Ceci garantit que chaque mise à jour est un Opération atomique .

_{* Sauf si vous n'êtes pas faire face à threads de travailleur}