React › React DevTools & Debugging

How do you debug a component that is not updating even though its state changed?

Intermediate

Answer

Common causes include mutating an array or object directly instead of creating a new one, which React does not detect as a real change, or a missing dependency in a useEffect or useMemo array. Checking the state's actual value in React DevTools right after the update, and reviewing how the state was set, usually reveals the mistake quickly.

// Wrong, mutates the existing array directly, React does not notice the change
items.push(newItem);
setItems(items);

// Correct, creates a brand new array so React detects the change
setItems([...items, newItem]);

Real-world example A to do list app that would not visually update after adding a new item is fixed by replacing a direct array mutation with a fresh array created using the spread operator, letting React correctly detect the change.

Common follow-ups: Why does React rely on creating a new object or array instead of detecting changes inside the existing one?;What tool helps catch this kind of mutation mistake automatically?

State Management;Hooks