Dépendances dans useEffect dans React

Maintenant, changeons la couleur au clic d'un bouton. Créons un état color pour la couleur, en lui donnant une valeur initiale :

App.jsxconst [color, setColor] = useState('green');

Remplaçons la valeur de chaîne par notre état dans useEffect et n'oublions pas de l'ajouter à la liste des dépendances entre crochets. Maintenant l'effet s'exécutera à chaque fois que l'état color changera :

App.jsxfunction App() {
  useEffect(() => {
    document.body.style.backgroundColor = color;
  }, [color]);
  
  ...
}

Ajoutons maintenant un bouton pour changer la couleur dans notre composant :

App.jsxreturn (
  <div>
    <h1>React App</h1>
    <button onClick={changeColor}>change</button>
  </div>
);

Ajoutons également la fonction gestionnaire du clic, qui changera notre couleur en orange :

App.jsxfunction changeColor() {
  setColor('orange');
}