web-dev-qa-db-ja.com

USEEffect依存関係アレイとESLINT Expersive-DEPSルール

私はこのようなコンポーネントを持っています：

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} />;
};
 _

徹底的なDEPS LINTの規則は幸せではありません。

React Hook UseEffectには、依存関係がありません。idとonChange。それらを含めるか、依存関係配列を削除してください。 （React-Hooks/Entrutive-Deps）ESLINT

idとonChangeが変更されないことを知っているので、それらを依存関係アレイに追加することは不要です。しかし、ルールは警告ではありません、何かをするのは明確な指示です。

ESLINTルールです。

1）この例の過度に慎重で少しダム、無視できますか？

2）ベストプラクティスの強調表示 - すなわち将来発生する可能性がある予期しないバグを最小限に抑えるために、親コンポーネントの変更はID 意志将来ある時点で変化するのか？

3）現在のコードで実際の/考えられる問題を表示していますか？

reactjsreact-hooksuse-effect
10
Will Jenkins

それを見る方法はすべてのレンダリングに独自の効果があります。エフェクトが特定の値セットで同じになる場合は、依存関係配列内の値についてReactに指示できます。理想的には、同じ状態と小道具を持つコンポーネントは、そのレンダリングと効果が行われた後に常に同じ出力（成分+効果）を持ちます。これはそれがバグにそれを弾力的にするものです。

ルールの点は、DEPが変更された場合、効果は再び実行されるべきであるため、異なる効果があるためです。

これらの3つのリンクもこれについてのより多くの洞察を与える。

1
Jackyef