Diagnose an Infinite Rerender Loop in React

1. Name the loop owner with the profiler.

echo "open React DevTools > Profiler > record 2s > inspect flame chart; the widest repeated frame is the loop owner"

Expected output: The profiler shows one component such as SettingsPanel rendering 3,000+ times in two seconds, versus its neighbors rendering once.

2. Find the update that fires every render.

// suspect pattern #1: object/array identity in deps
useEffect(() => {
  setFilter({ ...filter, ready: true });      // new object every time
}, [filter]);                                // filter changed -> loop

// suspect pattern #2: unstable function from parent
function Parent() {
  const onTick = () => setTime(time + 1);     // new fn each render
  return <Child onTick={onTick} />;           // memo(Child) never memoizes
}

// suspect pattern #3: derived state stored instead of computed
const [total, setTotal] = useState(0);
useEffect(() => setTotal(items.reduce((a, i) => a + i.price, 0)), [items]);

Expected output: The three canonical loop shapes print; matching your code to one of them localizes the fix to a dependency, a memo, or a derived-state refactor.

3. Instrument the update to prove the chain.

useEffect(() => {
  console.count('[loop] filter effect fired');
  console.trace('[loop] updater');
}, [filter]);

Expected output: The console shows the effect firing hundreds of times with a stack trace naming the setState call that re-triggers it, converting suspicion into evidence.

4. Break the cycle at its actual joint.

// fix #1: update only when the value actually changes
useEffect(() => {
  setFilter((f) => (f.ready ? f : { ...f, ready: true }));
}, []);  // run once; guard inside the updater

// fix #2: stabilize the function identity
const onTick = useCallback(() => setTime((t) => t + 1), []);

// fix #3: compute, do not store
const total = useMemo(
  () => items.reduce((a, i) => a + i.price, 0),
  [items]
);

Expected output: The rerender count collapses to the intended one-per-interaction, and the profiler trace shows a flat line instead of a repeating tower.

5. Verify with the profiler and a render counter.

let renders = 0;
function SettingsPanel(props) {
  renders++;
  if (typeof window !== 'undefined') {
    window.__settingsRenders = renders;
  }
  // ... component body
}

Expected output: Loading the page and reading window.__settingsRenders shows a small stable number (1-3) instead of climbing every second; the counter is removed before merge.

Problem

Loop involves a context provider

Solution

Every context value change rerenders all consumers; memoize the value object with useMemo over its true dependencies, or split the context into changing and stable parts.

Problem

Loop only under Strict Mode double-render

Solution

That is Strict Mode surfacing a real impurity that production single-render hides; fix the impurity (side effect during render) rather than removing Strict Mode.

Problem

Loop is in a library component

Solution

Wrap the boundary with React.memo and stable props to isolate it, and file an upstream issue; your last resort is keys to force remount, which trades the loop for state loss.