So far we've made re-renders visible with a hand-built RenderCounter – useful, but coarse. The React DevTools Profiler is the official tool for the same question, with considerably more detail: WHAT rendered and for how long, WHY a particular component re-rendered, and how time is distributed across the whole tree.

Installation

Install the "React Developer Tools" browser extension (Chrome, Firefox, or Edge – each available in the official add-on store). Then open the browser DevTools (F12) in our running app – two new tabs appear: "⚛️ Components" and "⚛️ Profiler".

Your first recording

1. Open the "⚛️ Profiler" tab
2. Click the blue record circle (⏺) – it turns red, recording is running
3. Do something in the app that triggers a re-render (e.g. click "Add to Cart")
4. Stop the recording with the same button

After stopping, a "flame chart" appears: each row is one render pass (a "commit"), each bar in it a component. WIDER bars mean LONGER render time, GRAY bars mean "did NOT re-render" (React still shows them for orientation, but grayed out).

"Why did this component render?"

Click on any single, colored bar – a side panel shows details, often including "Why did this render?" with a list of the CHANGED props/state values that caused the render. This is the direct, tool-assisted replacement for our manual RenderCounter experiment from chapter 27 – enable the "Record why each component rendered while profiling" option in the profiler settings (gear icon) for this.

Hands-on experiment: watching CartWidget in the profiler

Start a new recording, click "Add to Cart" twice on the SAME product, stop the recording. You should see: ProductCard itself does NOT re-render (its isFavorite state doesn't change), but CartWidget AND ProductListPage each re-render. Click the CartWidget bar and read the "Why did this render" explanation – it should list the changed useSelector return value (the item count) as the cause.

Using "Ranked" mode

At the top of the profiler panel there's a toggle between "Flamegraph" and "Ranked". Ranked mode sorts ALL components of a commit by render time, descending – ideal for QUICKLY finding the "most expensive" components of a given update in a large app, without having to scan the whole tree.

Tracking interactions live instead of recording manually

An alternative to manual start/stop: the small circle button next to the record button enables "Reload and start profiling" – useful for profiling the VERY FIRST render of the app (right after loading), which manually starting after the page has loaded always misses.