Suggest an edit

Improve this article

Refine the answer for “What does React Profiler do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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

1. Install **React Developer Tools** (a Chrome/Firefox extension);
2. Open DevTools -> the **React Developer Tools** tab;
3. 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

1. **Finds "heavy" components**
-> a red highlight means a lot of render time.
2. **Shows unnecessary re-renders**
-> you can see that a component re-renders without props/state changes, so it needs `React.memo()`.
3. **Reveals a "leaking" context**
-> a change in Context triggers a cascade of re-renders, so it's worth splitting the providers.
4. **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

1. **Flamegraph**
  - Shows the component hierarchy and render time.
  - The wider the block, the longer the render.
2. **Ranked**
  - Shows a list of components sorted by render time.
3. **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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts772 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.