Too many re-renders の原因と解決策

概要

Too many re-rendersは、Reactコンポーネントが無限ループでレンダリングされ続ける場合に発生します。通常、レンダリング中にstateを更新していることが原因です。

エラーメッセージ

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

原因

レンダリング中にsetStateを直接呼び出し: 関数参照ではなく関数実行を渡している
useEffectの依存配列が不適切: 毎回新しいオブジェクトが作られる
イベントハンドラの誤り: onClickに関数の実行結果を渡している

解決策

1. イベントハンドラを関数参照に

1
2
3
4
5
6
7
8
// 悪い例：レンダリング毎にsetCountが実行される
<button onClick={setCount(count + 1)}>Click</button>

// 良い例：クリック時にのみ実行
<button onClick={() => setCount(count + 1)}>Click</button>

// または
<button onClick={() => setCount(prev => prev + 1)}>Click</button>

2. useEffectの依存配列を修正

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// 悪い例：objが毎回新しく作られる
useEffect(() => {
    doSomething(obj);
}, [{ key: 'value' }]); // 毎回異なるオブジェクト

// 良い例：useMemoで安定化
const obj = useMemo(() => ({ key: 'value' }), []);
useEffect(() => {
    doSomething(obj);
}, [obj]);

3. 条件付きでstateを更新

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// 悪い例
useEffect(() => {
    setData(fetchedData);
}); // 依存配列なし = 毎回実行

// 良い例
useEffect(() => {
    if (fetchedData !== data) {
        setData(fetchedData);
    }
}, [fetchedData]);

概要

エラーメッセージ

原因

解決策

1. イベントハンドラを関数参照に

2. useEffectの依存配列を修正

3. 条件付きでstateを更新

JavaScript の他のエラー