Too many re-rendersの原因と直し方｜React

Too many re-renders. React limits the number of renders to prevent an infinite loop. は、コンポーネントを描画（レンダー）している最中に state を更新し、「描画 → 更新 → 描画 → 更新…」が止まらなくなったときのエラーです。 一番多い原因は、onClick に関数を渡すつもりで、呼び出してしまう書き間違いです。

<button onClick={handleClick()}>追加</button>       // ✕ 描画のたびに handleClick を実行してしまう
<button onClick={handleClick}>追加</button>         // ○ 関数を渡す
<button onClick={() => handleClick(id)}>追加</button>  // ○ 引数を付けたいときはアロー関数で包む

確認環境：React 19.3.0、react-dom 19.3.0（jsdom 26 の上で createRoot で描画）（確認日 2026年10月11日）。

再現：どの書き方でエラーになるか

確認環境で、描画の回数を数えながら試しました。

onClick={setCount(count + 1)} は、「クリックされたら実行する関数」ではなく、「描画中に今すぐ実行した結果」を onClick に渡しています。 実行するたびに state が変わって再描画され、また実行され…と続き、約 50 回で React が止めました。React の公式ドキュメントでも、この原因の多くはイベントハンドラーの書き間違い（() が付いている）だとされています。

レンダー中の setState が必要なとき

function List({ items }) {
  const [prevLen, setPrevLen] = useState(null);
  if (prevLen !== items.length) {     // ← 条件があるので、2回目の描画で止まる
    setPrevLen(items.length);
  }
  ...
}

前回の値と比べる条件の中でだけ setState すると、2回の描画で落ち着きました。 公式ドキュメントでも、描画中に set を呼ぶなら必ず条件の中で、と説明されています（ただし、分かりにくいので、なるべく避ける書き方とされています）。

エラーにならない無限ループ：useEffect

useEffect の中の setState でも無限ループは起きますが、Too many re-renders にはなりませんでした。

Maximum update depth exceeded. This can happen when a component calls setState inside useEffect,
but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

画面は動き続けたまま、裏で描画が数千回繰り返されました。 useEffect の中で API を呼んでいれば、その回数だけ呼ばれ続けます。コンソールの Maximum update depth exceeded の警告を見逃さないようにします。

オブジェクトを依存配列に入れると、毎回「変わった」とみなされる

const opt = { page: 1 };                       // 描画のたびに新しいオブジェクト
useEffect(() => { fetchList(opt); setLoaded(x => x + 1); }, [opt]);   // ✕ 毎回実行される

const opt = useMemo(() => ({ page: 1 }), []);  // ○ 同じオブジェクトを使い回す
useEffect(() => { ... }, [page]);              // ○ オブジェクトではなく、中の値を依存にする

中身が同じでも、毎回新しく作ったオブジェクトは「別のもの」として比べられます。 公式ドキュメントでも、コンポーネントの中で作るオブジェクトや関数を依存配列に入れると、必要以上に再実行される原因になるとされています。依存配列には、オブジェクトではなく page のような値を入れるか、オブジェクトを useEffect の中で作ります。

エラーの種類の見分け方

確認の手順（チェックリスト）

よくある質問

Q. 描画の回数を確かめる方法はありますか。 A. 確認環境では、コンポーネントの中で回数を数える変数を増やして確かめました。再描画の原因全体は、関連記事の「React再レンダリングの原因と確認方法｜childrenで防ぐ書き方」で扱っています。

まとめ

• 描画の最中に state を更新し続けたエラー。約 50 回で React が止める
• 一番多いのは onClick={handleClick()}。onClick={handleClick} か () => handleClick(id) に
• 描画中の setState は、前回と違うときだけの条件の中で
• useEffect の無限ループは、エラーにならず数千回描画が続く。Maximum update depth exceeded の警告に注意
• 依存配列にはオブジェクトではなく値を。オブジェクトなら useMemo

参考・出典

確認日はいずれも 2026年10月11日です。

• React「useState」（Troubleshooting）：https://react.dev/reference/react/useState
• React「useEffect」（Troubleshooting）：https://react.dev/reference/react/useEffect

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。