Debug: React component not updating after state change

React component doesn't re-render even though state was supposedly changed.

Debug state update failures:

// CAUSE 1: Mutating state directly
// BAD: Mutating array/object in place
const [items, setItems] = useState([1, 2, 3]);
items.push(4);  // Mutation! React doesn't detect this
setItems(items); // Same reference -> no re-render!

// GOOD: Create new reference
setItems([...items, 4]);
setItems(prev => [...prev, 4]);

// CAUSE 2: Mutating object state
// BAD:
const [user, setUser] = useState({ name: 'Alice', age: 30 });
user.name = 'Bob';  // Mutation!
setUser(user);      // Same reference!

// GOOD:
setUser({ ...user, name: 'Bob' });
setUser(prev => ({ ...prev, name: 'Bob' }));

// CAUSE 3: Nested object mutation
// BAD:
const [state, setState] = useState({
  user: { address: { city: 'NYC' } }
});
state.user.address.city = 'LA';
setState({ ...state }); // Shallow copy, nested object same ref!

// GOOD: Copy all nested levels
setState(prev => ({
  ...prev,
  user: {
    ...prev.user,
    address: { ...prev.user.address, city: 'LA' }
  }
}));

// CAUSE 4: State update batching
// React 18 batches all state updates
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
// Result: count + 1 (not count + 3!)

// GOOD: Use functional updates
setCount(c => c + 1);
setCount(c => c + 1);
setCount(c => c + 1);
// Result: count + 3

// CAUSE 5: useEffect dependency missing
useEffect(() => {
  fetchData(userId);  // userId changes but effect doesn't re-run
}, []);  // Empty deps! Should include userId

// CAUSE 6: State set to same value
setFlag(true);  // If flag is already true, no re-render (correct behavior)

React uses Object.is() comparison to detect state changes. Mutations don't change the reference, so React doesn't know to re-render. Always create new objects/arrays for state updates.

React state management debugging