🗂

Reactの依存配列に入れる必要が無いもの

に公開3

依存配列に入れる必要が無いもの

  • useStateで定義したset関数
  • サードパーティの関数や自作のユーティリティ関数
  • react-reduxのuseDispatch()で取得したdispatch関数

依存配列に入れるかどうかの判断基準

値が変わったら"処理を実行して欲しい"または"定義した関数の中で使用する変数を最新化したい"という変数。
importで呼び出す関数はファイル読み込み時に一度だけ定義され、再レンダリングや再実行で変わることわない。(参照が不変)。
依存配列には「レンダリングごとに変わる可能性がある値や関数」だけを入れる必要がある。

useStateのset関数はどれだけ再レンダリングされてもずっと同じ関数インスタンス

set関数はずっと同じ関数インスタンスのままである。つまり、set関数を依存配列に入れても、set関数はずっと同じなので、意味が無い。
このずっと変わらない性質は、Ractで不変性が保証しているため。

Discussion

Honey32Honey32

失礼します。

ESLint の react-hooks/exhaustive-deps ルールを使えば、依存配列に含めるべき / 含める必要がない の判定を自動でやってくれます。

https://ja.react.dev/reference/react/useEffect#specifying-reactive-dependencies

React 自体の設計として、依存配列はツールによって自動的に決定するように想定されています。(React がいま開発している Compiler の開発が進めば、依存配列はそれに自動生成させることが可能になります)

https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more#automatic-effect-dependencies

React Redux の dispatch 関数なんかは、不要なのに依存配列に追加されてしまうと思いますが、関数のインスタンスが「安定」しているので、結局無駄な再計算には繋がらないはずです。

noelsunnoelsun

ありがとうございます。
react-hooks/exhaustive-deps ルールを知らなかったため、業務に活用させて頂きます。
将来的にReactがComplier開発によって依存配列が自動生成されることが可能になると聞いて、より便利になってうれしいです。(ですがちゃんと依存配列の仕組みは理解しておくようにします)

dispatchを入れても、インスタンスが安定(再レンダリングされてもインスタンスは不変)なので、無駄な再計算が起こらない、ということでより理解できました。

Honey32Honey32

(返信忘れてた💦)少しでも助けになれたなら幸いです!