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

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

01

Understand 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.

debuggingtoolsdeveloper experienceperformance

02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the 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 instal

Solution ready — 2 min read

Classified // press E to declassify

04

Explore the playground snippets

A component instrumented so DevTools shows something useful

Run 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>
  );
}

05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.