web-dev-qa-db-fra.com

UseEffeCect Tableau de dépendance et règle ESLINT EXPOSIVE-DEPS

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 de peluche exhaustive-DEPS n'est pas heureuse:

Réagir Hook UseEffet a manqué des dépendances: id et onChange. L'inclure ou la suppression de la matrice de dépendance. (crochets de réaction/depfusifs-Deps) Eslint

Je sais que id et onChange _ ne va pas changer, les ajouter à la matrice de dépendance semble inutile. Mais la règle n'est pas un avertissement, c'est une instruction claire de faire quelque chose.

Est la règle d'Eslint:

1) Over-prudy et un peu muet dans ce cas, si sûr d'ignorer?

2) souligner la meilleure pratique - c'est-à-dire pour minimiser les bugs inattendus qui pourraient survenir à l'avenir si, par exemple, des modifications des composantes des parents signifient que l'ID volonté changer à un moment donné à l'avenir?

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

reactjsreact-hooksuse-effect
10
Will Jenkins

La façon de regarder c'est que chaque rendu a son propre effet. Si l'effet sera le même avec un ensemble particulier de valeurs, nous pouvons dire React sur ces valeurs dans la matrice de dépendances. Idéalement, un composant avec le même état et les mêmes accessoires, aura toujours La même sortie (composant rendu + effet) après son rendu et son effet est effectuée. C'est ce qui le rend plus résilient à des bugs.

Le point de la règle est que, si les DEPS changent, l'effet doit être à nouveau exécuté, car c'est maintenant un effet différent.

Ces 3 liens donnent également plus de idées à ce sujet:

1
Jackyef