React › React DevTools & Debugging

How do you use the Components tab in React DevTools to inspect a component's current state?

Intermediate

Answer

You click on any component shown in the tree on the left, and a panel on the right shows its current props, state, and hooks with their live values. You can even edit these values directly in DevTools to test how the component behaves without changing your actual code.

// No code needed, this is done entirely inside the browser DevTools panel
// 1. Click the Components tab
// 2. Click on a component in the tree
// 3. View and edit its props, state, and hooks on the right panel

Real-world example A developer debugging a form that will not submit clicks on the form component in React DevTools and immediately sees that a required field's state is still empty, revealing exactly why the submit button stays disabled.

Common follow-ups: Can you search for a specific component by name inside the Components tab?;How do you find which component owns a specific piece of state you see in DevTools?

Hooks;Error Handling