React Developer Tools

Introduction

The previous lesson talked about measuring before optimizing, without saying exactly how to measure. That is the job of the React Developer Tools — a free browser extension that lets you see the component tree, inspect live props and state, and record exactly which components rendered and why during any interaction.

This lesson covers installing the extension and using its two main tabs, Components and Profiler, to turn the performance concepts from the last lesson into something you can actually observe in a running app.

Installing React Developer Tools

React Developer Tools is available as a browser extension for Chrome, Firefox, and Edge, published by the React team. Once installed, it adds two new panels — Components and Profiler — to your browser's developer tools, right alongside Elements, Console, and Network.

The Components Tab

The Components tab shows the actual React component tree — not just the raw HTML, but the components you wrote, nested exactly as they appear in your code. Selecting any component reveals its current props, state, and hooks in a side panel.

For example, selecting a `Counter` component in the tree might show `state: { count: 4 }` in the side panel — and clicking that value lets you change it to `10` on the spot, instantly seeing the UI update, without touching a single line of code.

The Profiler Tab

While the Components tab shows a snapshot, the Profiler tab shows behavior over time. You start a recording, interact with the app (click a button, type in a search box), stop the recording, and the Profiler shows exactly which components rendered during that window, how long each render took, and — critically — why each one rendered.

1. Open the Profiler tab
2. Click the record button (a circle icon)
3. Interact with your app as usual
4. Click the record button again to stop
5. Review the flame chart / ranked chart of renders

Example: Diagnosing an Unnecessary Re-Render

Recall the Dashboard/ExpensiveList example from the previous lesson, before any memoization was added. Here is how you would actually confirm the problem using these tools rather than guessing.

function Dashboard() {
  const [search, setSearch] = useState("");
  const items = useProductList();

  return (
    <div>
      <input value={search} onChange={(e) => setSearch(e.target.value)} />
      <ExpensiveList items={items} />
    </div>
  );
}

1. Open the Profiler tab and start recording.
2. Type a few characters into the search input.
3. Stop recording.
4. In the flame chart, ExpensiveList appears on every commit,
   even though only the input's value actually changed.
5. Selecting ExpensiveList shows the reason: "parent re-rendered."
6. This confirms ExpensiveList is a good candidate for React.memo.

Typing in the search input now only shows Dashboard and the input
rendering on the flame chart. ExpensiveList no longer appears in
those commits at all.

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

The React Developer Tools extension closes the loop that the previous lesson opened: instead of guessing which component is slow or why it re-rendered, you can watch it happen directly, inspect live props and state in the Components tab, and record exactly what happened during an interaction in the Profiler tab.

In this lesson, you installed the extension and learned to navigate the component tree, inspect and edit live values, and record and interpret a Profiler session. Next, and finally, you will learn how to build and deploy a React application so real users can use it.