🐙
どこかのコンポーネントで無限ループが発生した
どこかのコンポーネントでエラーが発生したが、特定の仕方がわからず躓いたので残しておく。
エラー発生
どこのコンポーネントで発生したかわからないエラーが発生した。
どこかで値が無限にセットされているらしい。
解決方法
-
大抵useEffectの依存関係で無限ループに陥っていると考えられる。
-
とりあえず修正を加えたコンポーネントを見てみる
-
それでも見つからない場合、<mark>修正を加えたコンポーネントの子コンポーネントを一つずつコメントアウト</mark>していく。
-
コメントアウトによって、当該エラーが発生しなくなったコンポーネントに犯人がいる。
今回の躓き
- reactは子コンポーネントがレンダリングされたとて、親コンポーネントは再レンダリングされない。親コンポーネント内でconsole.logした結果無限ループが発生したため、親コンポーネントに原因があると思い込んでいた。
- また、自身が修正した箇所が30ファイルほど存在したため、必ずどこかに犯人がいると思い込んでいた。
- 結果、犯人は、子コンポーネント内のuseEffectの中のstateの更新箇所であった。今回修正で、子コンポーネント内のuseEffectの依存関係にある値を無限に更新するようにしてしまった。
- 視野を広く持とう。
Discussion