Profiling a React Application using React Profiler

eh, what is profiling?

Profiling is what you do when your performance testing shows a problem. It helps you identify those parts of your system that contribute the most to the performance problem and shows you where to concentrate your efforts.

Using profiling tools to look for potential bottlenecks during development can significantly reduce the number of problems that show up later.

With the right tools and training, it can become a regular part of the development process without adding too much overhead.

so in this article, I will try to demonstrate and explain a profiling process with react-profiler on a react application.

react-profiler

React profiler is a React 16.5 support for a new DevTools profiler plugin. This plugin uses React’s experimental Profiler API to collect timing information about each component that’s rendered in order to identify performance bottlenecks in React applications.

to start off, open your chrome dev tools and select the profiler tab (make sure that you have react dev tools extension installed), this could be done by pressing ctrl+shift+i on chrome.

next, you press the record button to record your application's behavior.

during this step, you should use your application as usual. try to interact with the necessary components that you think would cause a huge load or render time for the application.

for this demonstration, I will use the react profile tool to profile our document search frontend application for PPL 2021.

once you are done, press the recording button again and you should get these results.

react profiler groups performance info by commit. Commits are displayed in a bar chart near the top of the profiler:

Each bar represents a single commit, The color and height of each bar correspond to how long that commit took to render.

by selecting the tallest bar (the longest to render), we could see the details of the commit and possibly identify the problems.

here we could see the render duration for the commit, it appears that our application took quite a bit of time to render the components during the current commit.

next, we could dissect the commits and identify its children.

for example, the commit above took 353.9ms to render, we could see that the DashboardPagecomponent is the main component in this commit, followed by the Context.Provider component that took 351.5ms to render.

then most of this time was due to two of its children which is FilterBar that took 105.2ms and styled.div that took 239.1ms.

now by doing this, we could identify what's causing the long render and possible bottlenecks for our application, and tweak it to handle the problems as needed.

afterthoughts

Knowing how to profile an application and understanding what the potential issues are will help you write better code.

Routinely testing the functionality you have written using a profiler, and looking for the common bottlenecks and problems will allow you to find and fix many minor issues that would otherwise become bigger problems later on.

try it out the next time you build your react projects, you'll sure to find it interesting 😃

until next time! cheers.