React DevTools & Debugging
5 questions foundWhat is React DevTools and how do you install it?
Beginner React DevTools is a free browser extension available for Chrome and Firefox that adds two new tabs to your browser's developer tools, letting you inspect the component tree, view current props and state, and see exactly why a component re rendered.
// Install from the Chrome Web Store or Firefox Add-ons page
// Search for React Developer Tools
// Once installed, open browser DevTools and look for the new Components and Profiler tabs
Real-world example A developer debugging why a button shows the wrong text opens the Components tab in React DevTools, clicks on the button component, and immediately sees the exact prop values it currently received.
Common follow-ups: Does React DevTools work on a production build, or only in development?;What is the difference between the Components tab and the Profiler tab?
Debugging & Diagnostics;Performance (memo/useMemo)
How do you use the Components tab in React DevTools to inspect a component's current state?
Intermediate 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
How would you use React DevTools to find out why a component re rendered when you did not expect it to?
Advanced React DevTools has a setting to highlight updates when components re render, showing a colored outline flash around any component that just re rendered. The Profiler tab can also show the specific reason for each re render, such as a prop change or a state update, helping you track down unnecessary re renders.
// Enable this setting inside React DevTools
// Components tab settings, check 'Highlight updates when components render'
// Then interact with your app and watch for unexpected flashing components
Real-world example A team notices a large sidebar flashing every time a user types into an unrelated search box, and traces the unnecessary re render back to a Context value that was being recreated on every render.
Common follow-ups: What commonly causes a component to re render even when its own props have not changed?;How do you fix a re render caused by a new object or function being created on every render?
Performance (memo/useMemo);Effects & Lifecycle
How do you debug a component that is not updating even though its state changed?
Intermediate 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
What is a helpful first step when debugging an error message shown in the browser console?
Beginner Read the error message carefully from top to bottom, since React error messages usually include the exact component name and often a helpful stack trace showing where the problem started. Searching for the exact error message online, along with checking the specific line of code it points to, usually leads directly to the fix.
// A typical React error message in the console
// Warning: Each child in a list should have a unique key prop.
// Check the render method of ProductList
// This tells you exactly which component and what the actual problem is
Real-world example A developer sees a warning about a missing key prop, reads exactly which component the warning points to, and fixes the bug within seconds by adding the missing key to the correct list item.
Common follow-ups: Why should warnings in the console not be ignored, even if the app still seems to work fine?;How do source maps help make error messages easier to understand?
Error Boundaries;Testing