Rendering and data flow
Debug component data flow
Use component inspection, logs, and small reproductions to locate the owner of an incorrect value or repeated update.
Start from the visible symptom and trace data to its owner.
Use a fixed order:
- Inspect the final DOM and accessibility state.
- Find the component that rendered it in React DevTools.
- Check its props, state, and Hooks.
- Find the owner of the first wrong value.
- 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.
Reduce the bug to the smallest component tree that still shows it. Then write down the owner and each transformation before editing.
Lesson completed