Debugging State Updates and Props in DevTools

1. The Debugging Mindset in React

When an unexpected bug occurs in a React application—such as a counter not updating, a dropdown refusing to close, or stale data displaying on screen—the issue almost always traces back to one of three questions:

1. 1
   Did the state actually change?
2. 2
   Did the new props reach the child component?
3. 3
   Did the component re-render when expected?

Using React DevTools and systematic logging techniques allows you to answer these three questions with scientific precision.

2. Inspecting Hook State in the Side Panel

When you select a functional component in the Components tree, the right-hand inspection drawer displays its internal details:

Notice:

• Hooks are labeled in order: 1. State, 2. State, 3. Effect.
• In modern React, if you pass a label or inspect custom hooks, DevTools displays the custom hook names clearly.
• You can click any state value, modify it (e.g. change "frontend" to "backend"), and watch React re-render the view instantly!

3. "What Caused This to Render?" in Profiler

Unnecessary re-renders are a leading cause of performance lag in React applications. The React DevTools Profiler provides the ultimate diagnostic answer:

1. 1
   Open the Profiler tab.
2. 2
   Click the blue Record circle.
3. 3
   Perform the user action (e.g. type in a search box or click a button).
4. 4
   Click Stop Recording.
5. 5
   Inspect the flamegraph: hover over any component.

DevTools displays an explicit breakdown:

4. Professional Console Debugging Techniques

Technique 1: Logging State Transitions with Functional Setters

Technique 2: Monitoring Prop Changes with useEffect

To verify if a child component is receiving updated props:

Technique 3: Temporary debugger Statements

Inserting a debugger; statement inside an event handler or effect pauses browser execution at that exact line and opens the browser's debugger with full call stack inspection.