Debug: React infinite re-render loop

React component keeps re-rendering infinitely, causing the browser to freeze or crash.

Common causes and fixes:

// 1. setState in render body (most common)
// BAD: Sets state every render -> infinite loop
function Component() {
  const [count, setCount] = useState(0);
  setCount(count + 1); // Runs every render!
  return <div>{count}</div>;
}
// FIX: Use useEffect
useEffect(() => {
  setCount(c => c + 1);
}, []); // Only on mount

// 2. Object/array in useEffect deps
// BAD: New object every render -> effect runs every render
useEffect(() => {
  fetchData(options);
}, [{ page: 1, limit: 10 }]); // New ref every render!
// FIX: Use primitives or useMemo
const options = useMemo(() => ({ page, limit }), [page, limit]);
useEffect(() => {
  fetchData(options);
}, [options]);

// 3. Function in useEffect deps
// BAD
const getData = () => fetch('/api/data');
useEffect(() => {
  getData();
}, [getData]); // New function ref every render!
// FIX: useCallback or move inside useEffect
useEffect(() => {
  const getData = () => fetch('/api/data');
  getData();
}, []);

// 4. State update triggers effect that updates state
useEffect(() => {
  setItems(transformItems(items)); // items changes -> effect runs -> repeat
}, [items]);
// FIX: Transform during render, not in effect
const transformedItems = useMemo(() => transformItems(items), [items]);

// DEBUG: Add console.log to identify which component is looping
useEffect(() => {
  console.log('Effect ran', { dep1, dep2 });
}, [dep1, dep2]);

Infinite loops happen when a state update causes a re-render that triggers the same state update again. The loop is usually state -> effect -> state.

React components stuck in infinite re-render loops