What are React Developer Tools and how do you use them?

Q: What are React Developer Tools and how do you use them?

**Target Audience:** Engineers preparing for React interviews — assumes you have built a React app. **Difficulty:** Easy > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . The React 19 API surface referenced in section 6 was read off the installed React 19.2.8 in this repo. ## 1. Why This Even Matters — A Story First The browser Elements panel shows you the finished building: walls, doors, paint. What it cannot show you is the architectural plan — which room belongs to which floor, who owns the light switch, and why the kitchen was rebuilt when someone opened a window upstairs. React DevTools shows you the plan. Same building, but organised the way you actually think about it: by component, not by DOM node. ## 2. The Core Idea 📌 **Interview term:** **React Developer Tools** is an official browser extension (Chrome, Firefox, Edge) that adds two panels to the browser devtools. There is also a standalone <co

The problem

Question presented to candidate: "Walk me through React DevTools. What are the panels, and what do you actually use each one for?"

What a strong answer should cover:

A browser extension (and a standalone package for React Native and other environments) adding two panels to the browser devtools.
Components panel: the component tree, with live props, state, hooks, and context for the selected node — and the ability to edit them in place.
Profiler panel: records a session and shows each commit, how long it took, which components rendered, and — with the setting enabled — why each one rendered.
Key workflow: "Highlight updates when components render" to see wasted re-renders visually.
The flamegraph vs ranked chart distinction, and that grey components are ones that did not re-render.
Practical touches: $r in the console for the selected component, owner-based filtering, and hiding host elements to reduce noise.
Signal of depth: the Profiler needs a development build or a production build with profiling enabled; a plain production build shows nothing useful.

Clarifying questions expected:

"Are we debugging correctness — wrong data on screen — or performance?" The panel differs.

Code / implementation expected: No. This is a tooling walkthrough.

debugging
tools
developer experience
performance

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for React interviews — assumes you have built a React app. Difficulty: Easy

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. The React 19 API surface referenced in section 6 was read off the installed React 19.2.8 in this repo.

1. Why This Even Matters — A Story First

The browser Elements panel shows you the finished building: walls, doors, paint. What it cannot show you is the architectural plan — which room belongs to which floor, who owns the light switch, and why the kitchen was rebuilt when someone opened a window upstairs.

React DevTools shows you the plan. Same building, but organised the way you actually think about it: by component, not by DOM node.

2. The Core Idea

📌 Interview term: React Developer Tools is an official browser extension (Chrome, Fire

The solution is hidden so you can try first

7 min read · 9 sections

Try it in the playground

Open any example in the playground to run and change it.

ReactA component instrumented so DevTools shows something useful

Open in playground

import { useState, useMemo, useCallback, useDebugValue, memo, Profiler } from "react";

// useDebugValue labels this hook in the DevTools Components panel. Without it
// you would just see two anonymous "State" entries in hook order.
function useCart(initial = []) {
  const [items, setItems] = useState(initial);
  const total = useMemo(() => items.reduce((s, i) => s + i.price, 0), [items]);
  useDebugValue(`${items.length} items, £${total}`);
  const add = useCallback((item) => setItems((prev) => [...prev, item]), []);
  return { items, total, add };
}

// Memoised: with "highlight updates" on, this should NOT flash when only the
// unrelated counter in the parent changes.
const CartList = memo(function CartList({ items }) {
  return (
    <ul>
      {items.map((i, n) => <li key={n}>{i.name} — £{i.price}</li>)}
    </ul>
  );
});

// NOT memoised, on purpose: this one flashes on every parent render. In the
// Profiler its render reason reads "the parent component rendered".
function CartTotal({ total }) {
  return <p>Total: <strong>£{total}</strong></p>;
}

export default function App() {
  const { items, total, add } = useCart([{ name: "Keyboard", price: 60 }]);
  const [unrelated, setUnrelated] = useState(0);

  // The Profiler component reports the same timings the DevTools panel shows,
  // which is handy for logging renders in CI or a test.
  const onRender = (id, phase, actualDuration) => {
    console.log(`[profiler] ${id} ${phase} in ${actualDuration.toFixed(2)}ms`);
  };

  return (
    <Profiler id="Cart" onRender={onRender}>
      <div style={{ padding: 24, fontFamily: "system-ui", lineHeight: 1.6 }}>
        <h3>Cart</h3>
        <CartList items={items} />
        <CartTotal total={total} />
        <button onClick={() => add({ name: "Mouse", price: 25 })}>Add item</button>{" "}
        <button onClick={() => setUnrelated((n) => n + 1)}>
          Unrelated state ({unrelated})
        </button>
        <p style={{ color: "#666", fontSize: 13 }}>
          Open React DevTools. Select App and look at the hooks pane — useCart
          shows its useDebugValue label. Then turn on "Highlight updates when
          components render" and press the unrelated button: CartTotal flashes,
          CartList does not, because it is memoised.
        </p>
      </div>
    </Profiler>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.