While developing, you might notice performance issues with your React app. Perhaps a page or section of a page takes longer than expected after a user interacts with it. It can be tough to diagnose the root cause of performance issues from the browser by just visiting and interacting with the page. Luckily, React’s Dev Tools browser extension includes a Profiler, which serves as the best way to measure a React app’s performance.

The Profiler gives us a way to visually inspect:

the order your components render
how long it takes each component to render
how many times renders occur

Profiler Overview

After installing the React Dev Tools extension, right click on the page in the browser and select Inspect Element. You’ll see a Profiler tab in the browser’s dev tools.

Start profiling by clicking on the record button in the top left:

Once you’ve started a profiling session, the Profiler will record the lifecycle of your app as you interact with it. Stop the profiling session to see the results:

Reading Profile Results

In the top right, the Profiler displays the number of times your React app rendered during the session. Re-renders can be due to anything such as a state change, hooks change, or context update:

Next to that is a series of vertical bars. Each of these represents how long a component took to render. It’s easy to identify where performance issues are taking place as you can simply identify the tallest bars which represent the components that take the longest to render. Hovering over them provides a summary of their rendering details:

Profile Views

There are three main views you can use. Each provides a different way to understand the results of your profiling session: Flamegraph, Ranked, and Timeline.

Each view displays important rendering details via sidepanel:

Flamegraph

The Flamegraph provides a hierarchical view of your app’s components:

Each row represents a component in your app, along with their child components. Each row’s name matches with a corresponding component, making it easy to reference in your code.

You can see two measurements of time next to the component name, for example: App (26ms of 45ms). This represents how long the specific component took to render vs. the time it took to for the component and all of it’s children to render.

As you navigate through each render, the Profiler highlights which components have changed since the last render. Components listed in gray are unchanged, while those that are colored have been updated.

Ranked

Ranked provides a list in order of the slowest rendered components down to the fastest. This view makes it easy to identify the slowest rendering components:

Timeline

Timeline provides a condensed single timeline view of how your app is rendered. I don’t find it to be as helpful or intuitive as the flamegraph or ranked views.

Advanced Options

The Profiler also provides advanced options for more detail:

Cause of Rerenders

These settings give you the option to display the reason for the re-render. This is helpful if you know where in your app the performance issue is occurring, but aren’t sure why.

Filter by Render Time

The advanced options also give you a way to filter out components based on a time to render threshold. This is useful if you want to clean your profile view by filtering out components that are rendering fast enough and you know aren’t experiencing any performance issues.

Measuring React Performance With the Profiler