top of page
Logo der Online Agentur mdwp

React Profiler

The React Profiler is a feature available in the React developer tools that helps developers measure the performance of a React application in terms of how components render and how much time they take. It's particularly useful in identifying performance bottlenecks in an application.

When you run the profiler, it records how often a component renders, what initiates the render, how much time it takes, and so on. Using this insight, you can optimize your React application for better performance.

A neat feature of the React Profiler is the ‘flamegraph’ which visually depicts components' render times and whether a component’s props changed (color coded in green).

Here's an example of how to use the profiler:

```jsx
import React, { Profiler } from 'react';

export default function App() {
return (
<Profiler id="Navigation" onRender={callback}>
<Navigation {...props} />
</Profiler>
);
}

function callback(
id, // the "id" prop of the Profiler tree that has just committed
phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
actualDuration, // time spent rendering the committed update
baseDuration, // estimated time to render the entire subtree without memoization
startTime, // when React began rendering this update
commitTime, // when React committed this update
interactions // Set of "interactions" that were traced when this update was scheduled
) {
// Aggregate or log 'id' and profiling information...
}
```
The `onRender` callback is called each time a component within the profiled tree “commits” an update. It receives parameters describing what was rendered and how long it took.

Please note: Profiling adds overhead, and is intended to be used in development mode, not in production mode. It can actually make an application feel slower if used excessively.

bottom of page