🐙

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

2024/01/29に公開

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

エラー発生

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

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

解決方法

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

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

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

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

今回の躓き

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

Discussion