Debug component data flow

Start from the visible symptom and trace data to its owner. The wrong screen almost always means the wrong value reached the wrong component.

Use a fixed order:

1. Inspect the final DOM and accessibility state.
2. Find the component that rendered it in React DevTools.
3. Check its props, state, and Hooks.
4. Find the owner of the first wrong value.
5. Inspect the event or Effect that updates it.

Add focused logs with context:

console.log('TaskList render', {
  filter,
  taskCount: tasks.length
})

A log inside the component body records rendering. A log inside an event handler records an interaction. Strict Mode may repeat development renders, so one log does not always mean one user action.

If data is correct but the screen is wrong, switch to the Elements, Accessibility, and CSS panels. React cannot fix invalid layout or a missing label by changing state.

Do not add state to compensate for a wrong derived value. Fix the first incorrect value or ownership decision.

When a value flickers between two states, look for an Effect that writes state on every render or two owners fighting over the same field. The fix is usually ownership, not another patch of state.

Compare props in DevTools between parent and child when a value looks wrong halfway down the tree. Often the parent passed the correct snapshot and the child transformed it incorrectly.

React DevTools also highlights which component rendered most recently, which helps when several siblings look identical on screen.

Reduce the bug to the smallest component tree that still shows it. Then write down the owner and each transformation before editing.