ReactのuseEffectで起きた無限ループ | 全国個人事業主支援協会

COLUMN コラム

ReactのuseEffectで起きた無限ループ

最近、useEffectが原因で無限ループにはまったのでその状況と対応策をまとめておきます。

状況：useEffectの依存配列にコンポーネント関数を含めることで無限ループする

コンポーネントの関数はレンダリングされるごとに作成されるためそれをuseEffectの第二引数である依存配列に入れてしまうと無限ループが発生します。

対応策：

・関数を useEffect 内に記述する

useEffect 内に記述してしまうことで依存配列に含める必要がなくなります。これが一番簡単。

・useCallBack を使う

useCallback でラップすることで、関数自体の依存が変わらない限り関数も変化しないことが保証されるようになります。

・関数の定義をコンポーネントの外に出す

コンポーネントの外に関数の定義を移すことで、useEffect はコンポーネントが再レンダリングされた際に同じ関数を参照するため useEffect が再実行されるのを回避できます。

今回はレンダリング時にAPIでデータを取得し、さらに検索ボタン押下でデータを再取得するというものを実装していましたが、useCallbackだと更新するデータを依存配列に含める必要があったため、useEffect内と検索ボタン押下時で別々に用意することにしました。

Reactはよくレンダリング地獄になりやすいのでhooksを使う際は注意が必要ですね、、、、

システムエンジニアをしています。フロントエンドを主に、サーバーサイドも書いたりします。 JS/TS/Python/Javaは少しだけ React/Angular/Next/Nuxt/Vue/Nodeなんかを使ったりします。