Debug: React 'Cannot update a component while rendering a different component'

React warning: Cannot update a component while rendering a different component. Usually caused by calling setState during render.

This happens when a state update is triggered during the render phase:

// BAD - setState during render:
function Parent() {
const [count, setCount] = useState(0);
return <Child onRender={() => setCount(c => c + 1)} />;
}
function Child({ onRender }) {
onRender(); // Calls setState during Parent's render!
return <div>child</div>;
}

// GOOD - use useEffect for side effects:
function Child({ onRender }) {
useEffect(() => {
onRender(); // Runs AFTER render, not during
}, []);
return <div>child</div>;
}

// Common patterns that cause this:

// 1. Calling parent callback in render:
// Fix: Move to useEffect

// 2. Zustand/Redux dispatch during render:
// Fix: Dispatch in useEffect or event handler

// 3. Setting state in useMemo:
// BAD:
const value = useMemo(() => {
setSomething(computed); // State update during render!
return computed;
}, [dep]);
// GOOD:
const value = useMemo(() => computed, [dep]);
useEffect(() => { setSomething(value); }, [value]);

// 4. Ref callback updating state:
// Fix: Use useEffect to read ref value