web-dev-qa-db-fra.com

Puis-je définir l'état dans un crochet useEffect

Disons que j'ai un état qui dépend d'un autre état (par exemple, quand A change, je veux que B change). 

Est-il approprié de créer un crochet qui observe A et place B dans le crochet useEffect? 

Les effets en cascade seront-ils tels que, lorsque je clique sur le bouton, le premier effet se déclenche, ce qui provoque la modification de b et le second effet, avant le prochain rendu? Existe-t-il des inconvénients en termes de performances pour structurer un code comme celui-ci?

let MyComponent = props => {
  let [a, setA] = useState(1)
  let [b, setB] = useState(2)
  useEffect(
    () => {
      if (//some stuff is true) {
        setB(3)
      }
    },
    [a],
  )
  useEffect(
    () => {
      // do some stuff
    },
    [b],
  )

  return (
    <button
      onClick={() => {
        setA(5)
      }}
    >
      click me
    </button>
  )
}
javascriptreactjsreact-hooks
6
Dan Ruswick

Les effets sont toujours exécutés une fois la phase de rendu terminée, même si vous définissezState dans le même effet, un autre effet lira l’état mis à jour et n’agira qu’après la phase de rendu. 

Cela dit, il est probablement préférable de prendre les deux actions avec le même effet, sauf s'il est possible que b puisse changer pour des raisons autres que changing a, auquel cas vous voudriez également exécuter la même logique.

2
Shubham Khatri

Utiliser setState dans useEffect créera une boucle infinie que vous ne voudrez probablement pas causer.

useEffect est appelé après chaque rendu et lorsque setState est utilisé à l'intérieur de celui-ci, le composant sera rendu de nouveau, ce qui appellera useEffect et ainsi de suite.

Le seul cas où l'utilisation de useState à l'intérieur de useEffect ne provoquera pas de boucle infinie est lorsque vous passez un tableau vide en tant que second argument à useEffect comme useEffect(() => {....}, []), ce qui signifie que la fonction effet doit être appelée une fois: après le premier montage/rendu uniquement.

0
Hossam Mourad