React: What are React DevTools and how to use it?

React DevTools is a browser extension (Chrome/Firefox) that allows inspecting the React component tree, their state, props, and performance.

Why it matters: Standard browser DevTools show you the raw DOM. React DevTools shows you the React tree — the component hierarchy, their props, hooks state, and context values. This is essential for debugging because React components can render to entirely different DOM structures than their component hierarchy suggests.

Features:

1. Components tab — component tree, their props/state/hooks.
2. Profiler tab — measuring render time of each component, flame graph.
3. Highlight updates — visualization of re-renders.
4. Search — search for component by name.

How to use the Components tab:

• Click on a component in the tree to see its current props, state, and hooks.
• Edit props/state directly in the panel — the component re-renders immediately.
• Use the search bar to find a component by name (useful in large trees).
• Click "Inspect element" in the browser to jump to the corresponding React component.

How to use the Profiler tab:

• Record a profile while interacting with your app.
• The flame graph shows which components rendered and how long they took.
• Components colored yellow/orange rendered quickly; red components are slow.
• Gray components did not re-render (React.memo is working).

Useful features:

• Filter by component name.
• Inspect element — clicking on a DOM element shows the corresponding React component.
• Edit props/state directly in DevTools.
• Record profile for performance analysis.

Common debugging workflow:

1. Open DevTools → Components tab.
2. Find the component that is rendering incorrectly.
3. Check its props — are they what you expect?
4. Check its state/hooks — is the state updated correctly?
5. If the component is slow, switch to Profiler and record a profile.
6. Identify which component re-renders unnecessarily.
7. Fix with React.memo, useMemo, or useCallback as needed.