useEffectで「Too many re-renders」が出た原因と解決法

はじめに

Supabaseからデータを取得して表示しようとしたとき、
画面が真っ白になり「Too many re-renders」と出ました。
この記事では、改めてuseEffectの使い方についてまとめます。

原因

useEffect の依存配列 [] を書き忘れていたため、
再レンダーのたびに再実行され、無限ループになっていた。

解決法

初回だけ実行されるように修正

useEffect(() => {
  async function fetchSpots() {
    const { data } = await supabase.from("study_spots").select("*");
    setSpots(data);
  }
  fetchSpots();
}, []); // これを忘れていた

学び

useEffectは「いつ実行するか」を第二引数で必ず指定する。
忘れると無限ループになる。