状態セッターに対するreact-hooks/exhaustive-deps警告の意味は何ですか?

Question

React を使用してページネーションを構築しています。

アプリケーションは状態を使用してページングと検索を管理します。検索語が変わったときにページネーションを 1 ページ目にリセットしたいと考えています。

// 簡略化された例

関数 useSearchTerm() {
  return React.useState("");
}

関数 usePage() {
  React.useState(1) を返します。
}

関数 MyComponent(){
  const [searchTerm, setSearchTerm] = useSearchTerm()
  const [ページ, setPage] = usePage();

  useEffect(() => {
    setPage(1);
  }, [searchTerm]); // <-- これは ESLint の警告です
}

これにより、ESLint 警告が表示されます React Hook useEffect の依存関係が欠落しています: 'setPage'。これを含めるか、useEffect フック array.eslintreact-hooks/exhaustive-deps への依存関係を削除してください。

もちろん、依存関係に setPage を含めると、レンダリングするたびにエフェクトが呼び出されます。

この使用例で何か間違ったことをしているでしょうか?

Answer 1

この中間関数に問題があるようです:

リーリー

useState 自体 によって返される状態設定関数 は、各レンダーで再作成されませんが、この外部関数を介して呼び出すとそれが壊れるようです。これにより、useEffect 依存関係配列に見られるように、依存関係が変化します。

この

usePage 関数が必要ない場合 (この例では必要ありませんが、より大きなコンテキストでは意味がある場合もあります)、完全に削除して使用してください。直接 useState: リーリー

一般に、関数内でフックを呼び出すことは望ましくありません。これは、レンダリングごとにフックを一貫して同じ順序で呼び出す必要があるというルールにすぐに簡単に違反する可能性があるためです。したがって、フック呼び出しをコンポーネント自体の本体 (およびコンポーネントのロジックの初期部分) に保持することが最善です。

場合によっては、

useEffect でカスタム関数を依存関係として機能させたい場合があります。宣言された関数はレンダリングのたびに再宣言されるため、上記で発生した問題が発生します。この問題を解決するには、関数を useCallback フックでラップします。このフック自体にも、useEffect とよく似た依存関係配列があります。このフックの目的は、(依存関係が変更されない限り) React がレンダリング全体で単一の関数インスタンスとしてキャッシュできるカスタム関数を作成することです。例えば：＃＃＃ リーリー