Use the React Profiler for Performance

Introduction

With React, building high-performance web applications became very easy because of the framework’s re-rendering on the JavaScript virtual DOM, which helps it to quickly determine the changes needed when a user event is occurring. When writing a complex application with React you will run into some performance issues, either because the application re-renders when it really doesn’t need to or because the states aren’t being handled properly, amongst other reasons.

What exactly is regarded as a high-performance application?

Performance is really important when dealing with a complex application or any application. In fact, if your application doesn’t cover 60 frames per second (fps) which would give it like 16.7ms per frame, it is more than likely underperforming with regards to the standards. When your app is slow, it obviously takes more time to carry out instructions in good time, leading to a poor user experience.

React Profiler

The concept of the react profiler is to collect timing information about components, the time rendered and committed in order to identify when each component actually rendered and at what speed. Basically to explain to you how fast or how slow your application is.

Profiling a React Application

To explain this process, I will be using a simple question and answer application, rendering on Mozilla Quantum browser, with the React Performance Devtool.

The React Profiler environment is empty at first, you’d also notice a record button. Click on it to start profiling.

Once you click on the record button, the profiler automatically collects performance information each time your application renders. To end this, click on the stop button.

The devtool provides a way for you to monitor the performance data.

Forms of Performance Data

React has two phases where it does work for our application:

• Render: React determines what DOM changes need to be made by comparing render results with a previous render
• Commit: React applies any changes that need to happen. Add/remove from the DOM and call lifecycle hooks like componentDidMount and componentDidUpdate

When profiling, we’ll be looking closely at the commit phase to see where performance dips are.

Filtering commits

The profiler runs for as long as your application renders, until you hit the stop button, you might have up to 30 commits depending on how many times your application renders. Say you want to know the commits that were faster than 500 milliseconds. The profiler offers a filtering option that can help you achieve this in these simple steps.

Step 1: Opening Settings

Click on the settings icon.

Step 2: Configure the Profiler

A drop-down profiler setting shows, from where you can then 'Hide commits below" a specific value, then view the changes on the upper right.

Browsing commits

Before we go further, have you ever wondered how react renders content? Basically, it is made up of two phases, the render phase and the commit phase, the summary of how react renders is that it determines what changes need to be made by comparing the results from the user event and applies the changes in the commit phase.

The commit bar chart can be found in the far right, the currently selected commit is colored black, the color and height of each bar correspond to how long that commit took to render.

Ranked Chart

The ranked chart view of representing performance shows a React component in bar format. It is arranged in descending order, with the components that took the longest to render at the top. A component’s rendering time also includes the time it took to render the children components.

Component Chart

When we want information on how many times a particular component is rendered, we can use the React profiler’s component chart feature which has bars that represent the time when the component is rendered. The color and height of each bar show how long the component took to render relative to other components in a particular commit. You can get here by simply double-tapping the rank bars.

Interactions

React recently added another experimental API for tracing the cause of an update. “Interactions” traced with this API will also be shown in the profiler. You can also see which interactions were traced for a particular commit from the flame chart and ranked chart views.

Flame Chart

The flame chart view represents the state of your application for a particular commit. Each bar in the chart represents a React component. The size and color of the bar represent how long it took to render the component and its children.

• width of a bar represents how much time was spent when the component was last rendered
• color represents how much time was spent as part of the current commit

Common Problems

When the following happens, don’t panic. Sometimes your app may have more than one root element, then you may see this error message.

• No profiling data has been recorded for the selected root

What this simply means is that no performance data was recorded for the root you are currently on. In this case, try selecting a different root in that panel to view profiling information for that root.

• No timing data to display for the selected commit

Sometimes a commit may be so fast that performance.now() doesn’t give DevTools any meaningful timing information.

External profiler

We can also run the React Profiler in the application by using the following:

import React, { Component, unstable_profiler as Profiler } from 'react';

const logProfiler = ({
  ProfilerId,
  Phase,
  ActualTime,
  StartTime,
  CommitTime,
  Interactions,
}) => {
  console.log({
    ProfilerId,
    Phase,
    ActualTime,
    Basetime, //time taken by react
    StartTime, //time at which render starts
    CommitTime,
    Interactions, // this is gotten from the rapping API
  });
}

If you want to wrap profiler external in your code you also have to indicate the root you want to profile:

<Profiler id="image-grid" onRender={this.logProfiler} />

The onRender prop is calling the profiler option and logging out all the information on the log.

Conclusion

In this article, you learned about using React Profiler.

It will be fully compatible with the upcoming time slicing and suspense features. Which are features still being worked on by the good people at React.

Happy coding!