← 一覧へ
コードの書き間違い出る場所:ブラウザの画面・開発者ツールたまに出る

画面の書きかえが止まらない(React)

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
Maximum update depth exceeded.

ひとことで言うと

「画面を書きかえる → また書きかえる…が、終わらずくり返されています」という意味です。

よくある原因

  1. onClick={setCount(1)} のように、押したときではなく表示したときに実行される書き方になっている
  2. useEffect の中で状態を変え、その変化でまた useEffect が動いている

自分で確かめること

たいていは、こうすると直ります

onClick={() => setCount(1)} のように、矢印で包みます。useEffect なら、[ ] の中身を正しくします。

AIへの伝え方

下の文をコピーして、ChatGPT・Claude・Cursor などに貼り付けてください。トップで貼り付けたエラー文があれば、自動でそれに入れかわります。

次のエラーが出て困っています。プログラミング初心者にもわかるように、原因と直し方を教えてください。必要なら、直したコードも全部見せてください。

【エラー】
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
Maximum update depth exceeded.

【やったこと】
(ここに、エラーが出る前にしたことを書く。例:npm run dev を実行した)

【参考】
このエラーは「画面の書きかえが止まらない(React)」というもので、よくある原因は次のとおりです。
・`onClick={setCount(1)}` のように、押したときではなく表示したときに実行される書き方になっている
・useEffect の中で状態を変え、その変化でまた useEffect が動いている

どれに当てはまるかを確かめる方法も教えてください。