どこかのコンポーネントで無限ループが発生した

どこかのコンポーネントでエラーが発生したが、特定の仕方がわからず躓いたので残しておく。

エラー発生

どこのコンポーネントで発生したかわからないエラーが発生した。

どこかで値が無限にセットされているらしい。

解決方法

• 大抵useEffectの依存関係で無限ループに陥っていると考えられる。

• とりあえず修正を加えたコンポーネントを見てみる

• それでも見つからない場合、<mark>修正を加えたコンポーネントの子コンポーネントを一つずつコメントアウト</mark>していく。

• コメントアウトによって、当該エラーが発生しなくなったコンポーネントに犯人がいる。

今回の躓き

• reactは子コンポーネントがレンダリングされたとて、親コンポーネントは再レンダリングされない。親コンポーネント内でconsole.logした結果無限ループが発生したため、親コンポーネントに原因があると思い込んでいた。
• また、自身が修正した箇所が30ファイルほど存在したため、必ずどこかに犯人がいると思い込んでいた。
• 結果、犯人は、子コンポーネント内のuseEffectの中のstateの更新箇所であった。今回修正で、子コンポーネント内のuseEffectの依存関係にある値を無限に更新するようにしてしまった。
• 視野を広く持とう。