阅读中文版本

React Infinite Render Loop — useState + useEffect Without Dependencies

Diagnose and fix infinite render loops caused by calling setState unconditionally inside useEffect without a dependency array.

F12 → React DevTools → Profiler tab → click record button

Look at the console error and expand the call stack

Symptom: Maximum Update Depth Exceeded

When a React component re-renders in an uncontrolled loop, you’ll see this error:

Warning: Maximum update depth exceeded. This can happen when a component
repeatedly calls setState inside useEffect or componentDidUpdate.
React limits the number of nested updates to prevent infinite loops.

In React 18+, this is capped at ~50 updates before React aborts. In React 17 and earlier, the browser tab may freeze.

Root Cause Analysis

The most common pattern:

function BadCounter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setCount(count + 1); // ❌ Runs after every render → triggers another render
  }); // ❌ No dependency array = runs after EVERY render

  return <div>{count}</div>;
}

What happens:

1. First render: count=0
2. useEffect runs: setCount(1) → schedules re-render
3. Second render: count=1
4. useEffect runs again: setCount(2) → schedules re-render
5. …repeat until React gives up (>50 updates)
6. Error thrown, component state may be corrupted

Step-by-Step Diagnosis

Step 1: Confirm the Loop with React DevTools Profiler

Open Chrome DevTools → Components tab → Settings → check “Highlight updates when components render”. Open the affected page. If a component flashes continuously, that’s the looping component.

Step 2: Find the Offending useEffect

Add a temporary counter:

useEffect(() => {
  console.log('effect ran, count:', count);
  setCount(count + 1);
});

Open the console. If the log appears rapidly and repeatedly without clicks, the loop is confirmed.

Step 3: Check Dependency Arrays

Review every useEffect that calls setState:

// ❌ Problematic (no deps = runs every render)
useEffect(() => { setUser(filteredUser); });

// ❌ Problematic (state in deps that the effect sets)
useEffect(() => { setCount(count + 1); }, [count]);

// ✅ Effect runs once on mount
useEffect(() => { setCount(initialValue); }, []);

// ✅ Use callback form for derived updates
useCount((prev) => prev + 1);

// ✅ Guard with condition
useEffect(() => {
  if (count < 10) setCount(count + 1);
}, [count]);

The Fix

Pattern A: Initialize State From Props

// ❌ Runs on every render, overwriting user changes
useEffect(() => {
  setLocalName(props.name);
});
// OR:
const [localName, setLocalName] = useState(props.name); // Better: init in useState

// ✅ Resets only when identity_ref_key changes
useEffect(() => {
  setLocalName(props.name);
}, [props.id]); // only reset when the user identity changes, not every render

Pattern B: Derived State

// ❌ Duplicate state → sync effect
const [items, setItems] = useState([]);
const [itemCount, setItemCount] = useState(0);
useEffect(() => { setItemCount(items.length); }, [items]);

// ✅ Compute derived value directly (no effect, no sync needed)
const itemCount = items.length;

Pattern C: Stable References for Object/Array Deps

// ❌ New object reference every render → infinite loop
useEffect(() => {
  fetch(`/api/data?filter=${JSON.stringify(filter)}`);
}, [filter]); // filter is a new {} every render

// ✅ Memoize or use primitive deps
const filterKey = useMemo(() => `${filter.type}-${filter.status}`, [filter.type, filter.status]);
useEffect(() => {
  fetch(`/api/data?filter=${filterKey}`);
}, [filterKey]);

Verification

After the fix:

1. Navigate to the affected page
2. Open React DevTools — components should render 1-3 times on initial load
3. CPU usage stays under 5% at idle
4. No console errors

Prevention Checklist

• Every useEffect that updates state MUST have a dependency array
• State that derives from other state should use useMemo, not a sync effect
• Props-to-state sync effects should include a semantic guard (id, version), not the whole prop
• Use the ESLint plugin eslint-plugin-react-hooks to catch missing deps at build time