What does React Profiler do?

ReactJunior~3 min read

What React Profiler does

React Profiler is part of React DevTools (a tab in Chrome/Firefox DevTools) that:

records every component render;
measures each one's render time;
shows the reason for the re-render (state, props, context, parent);
helps find performance bottlenecks.

Where to find the Profiler

Install React Developer Tools (a Chrome/Firefox extension);
Open DevTools -> the React Developer Tools tab;
Go to the "Profiler" sub-tab.

There is a "Record" button that starts recording every render.

How the Profiler works (conceptually)

While profiling, React adds "markers" around each render:

javascript

render(<Component />) → startTimer()
...render...
stopTimer()

Then it collects statistics:

how many milliseconds the render took;
how many times the component was drawn;
which dependencies triggered the update;
which components "woke up" needlessly.

Example of using the Profiler (in DevTools)

1. You click "Record"

React starts tracking every render.

2. You perform actions in the app

For example, click a button, type text, navigate between pages.

3. You click "Stop"

React shows the component tree highlighted by render "cost":
- Red: rendered slowly (a slow component);
- Yellow: average;
- Green: fast.

What the Profiler shows

Metric	Description
Render duration	How long a component's render took
Commits	How many times React updated the DOM over the period
Why did this render?	The reason for the re-render (state, props, context, parent)
Flamegraph	A visual map of components with their render time
Ranked chart	A list of components sorted by render duration
Interactions	Which user actions triggered the updates

Example: what the analysis looks like

You click "Add product", and the Profiler shows:

javascript

<ProductsList> - Rendered (state changed)
<ProductItem> - Rendered (props changed)
<Header> - Skipped (no changes)

And also:

Render duration: 7.3ms
Commit 1: 15 components updated
Commit 2: 2 components updated

You can see who ate up how much time.

Example of using it through code (for manual measurements)

React also provides the <Profiler> component for measurements in code:

javascript

import { Profiler } from 'react';

function onRenderCallback(
  id, // a string - the name of the profiled area
  phase, // "mount" | "update"
  actualDuration, // how long the render took
  baseDuration, // without memoization
  startTime, // when the render started
  commitTime, // when it finished
) {
  console.log(`${id}: ${phase} took ${actualDuration.toFixed(2)}ms`);
}

export default function App() {
  return (
    <Profiler id="ProductsList" onRender={onRenderCallback}>
      <ProductsList />
    </Profiler>
  );
}

This is useful for programmatic profiling: you can log to the console, metrics, Sentry, analytics, and so on.

How the Profiler helps you optimize

Finds "heavy" components -> a red highlight means a lot of render time.
Shows unnecessary re-renders -> you can see that a component re-renders without props/state changes, so it needs React.memo().
Reveals a "leaking" context -> a change in Context triggers a cascade of re-renders, so it's worth splitting the providers.
Compares performance before/after optimizations -> you can record "before" and "after" and see the effect of useMemo, useCallback, memoization.

Typical findings using the Profiler

Problem	Solution
A component re-renders on every keystroke	`React.memo()` + `useCallback()`
The context updates the whole UI	Split the context or use selectors
Heavy sorting/filtering on every render	`useMemo()`
Many small `setState()` calls in a row	Combine them / use batching
Many effects on every update	Refine the `useEffect` dependencies

Visual profiler modes

Flamegraph

Shows the component hierarchy and render time.
The wider the block, the longer the render.

Ranked

Shows a list of components sorted by render time.

Commit selector

You can view each render cycle ("commit") separately.

Summary

What it does	How it helps
Measures component render time	Finds slow areas
Shows the reasons for re-renders	Helps understand "who's to blame"
Visualizes the load	Flamegraph and ranked view
Used with DevTools or `<Profiler>`	For analysis in the browser and in code
Improves performance	Provides data for optimizing `React.memo`, `useMemo`, context

In simple terms:

React Profiler is like an "X-ray" for your UI: it shows which components render too often and where performance is being lost.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.