tableau de dépendance useEffect et règle d'exhaustivité ESLint

Question

J'ai un composant qui ressemble à ceci :

const MyComponent = props => {
  const { checked, onChange, id } = props;
  const [isChecked, setChecked] = useState(false);

  useEffect(() => {
    onChange && onChange({ isChecked: !!checked, id });
    setChecked(checked);
  }, [checked]);

  const childProps = {
    id,
    isChecked
  };

  return <ChildComponent {...childProps} />;
};

La règle du lint exhaustive-deps n'est pas heureuse :

React Hook useEffect a des dépendances manquantes : id y onChange . Il faut soit les inclure, soit supprimer le tableau de dépendances. (react-hooks/exhaustive-deps)eslint

Je sais que id y onChange ne vont pas changer, donc les ajouter au tableau des dépendances semble inutile. Mais la règle n'est pas un avertissement, c'est une instruction claire pour faire quelque chose.

C'est la règle ESLint :

1) Trop prudent et un peu stupide dans ce cas, on peut donc l'ignorer ?

2) Mettre en évidence les meilleures pratiques - c'est-à-dire minimiser les bogues inattendus qui pourraient survenir à l'avenir si, par exemple, des changements dans les composants parents signifient que l'id sera changer à un moment donné dans le futur ?

3) Montrer un problème réel/possible avec le code tel qu'il est actuellement ?

Answer 1

En fait, la règle est très simple : Soit vous passez un tableau contenant toutes les dépendances, soit vous ne passez rien. Donc je suppose que la règle n'est pas idiote, elle ne sait simplement pas si les dépendances vont changer ou non. Donc oui, si vous passez un tableau de dépendances, il doit contenir TOUTES les dépendances, y compris celles dont vous savez pertinemment qu'elles ne changeront pas. Quelque chose comme ça va générer un avertissement :

useEffect(() => dispatch({ someAction }), [])

Et pour corriger cela, vous devez passer dispatch comme une dépendance, même si elle ne changera jamais :

useEffect(() => dispatch({ someAction }), [dispatch])

Ne désactivez pas la règle des décharges exhaustives, comme indiqué. ici

---

MISE À JOUR 05/04/2021

Comme indiqué ici . Ce n'est plus nécessaire depuis que eslint pull #1950 .

Maintenant, les types référentiels à signature stable tels que les provenants de useState o useDispatch peut être utilisé en toute sécurité à l'intérieur d'un effet sans déclencher exhaustive-deps même lorsqu'il vient de props

Answer 2

La façon de voir les choses est que chaque rendu a son propre effet. Si l'effet sera le même avec un ensemble particulier de valeurs, alors nous pouvons indiquer à React ces valeurs dans le tableau des dépendances. Idéalement, un composant avec le même état et les mêmes props, aura toujours la même sortie (composant rendu + effet) après que son rendu et son effet soient terminés. C'est ce qui le rend plus résistant aux bogues.

Le but de la règle est que, si les deps changent, l'effet DOIT être relancé, car il s'agit maintenant d'un effet différent.

Ces 3 liens donnent également plus d'informations à ce sujet :

• https://github.com/facebook/react/issues/14920#issuecomment-471070149
• https://overreacted.io/a-complete-guide-to-useeffect/
• https://overreacted.io/writing-resilient-components/