{"id":5423,"date":"2021-02-01T11:26:48","date_gmt":"2021-02-01T11:26:48","guid":{"rendered":"https:\/\/www.folio3.com\/mobile\/?p=5423"},"modified":"2021-02-17T11:24:49","modified_gmt":"2021-02-17T11:24:49","slug":"how-to-measure-react-app-performance","status":"publish","type":"post","link":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-measure-react-app-performance\/","title":{"rendered":"How to measure React app performance"},"content":{"rendered":"\n

Performance is the key aspect of high-quality software. While developing any software, one must know how to make it performant enough. In this blog, we will see how we can measure the React app performance through React Profiler. <\/p>\n\n\n\n

In React app development<\/a>, we are mostly playing around on components. Components let you split the UI into independent, reusable pieces. You create a component and React renders it to DOM. <\/p>\n\n\n\n

BUT \u2026.<\/strong> <\/p>\n\n\n\n

But the main problem here is to ensure that these components should not render unnecessarily, and the cost of rendering should be optimized enough. <\/p>\n\n\n\n

React Profiler<\/strong> <\/em><\/h4>\n\n\n\n

The React profiler measures how often a component is rendered and what’s the cost of rendering. Its purpose is to help identify parts of an application that are slow so that we can work on optimizing them. <\/p>\n\n\n\n

Note<\/strong>: <\/p>\n\n\n\n

Profiling adds some additional overhead, so it is disabled in the production build<\/a>. <\/p>\n\n\n\n

To opt into production profiling, React provides a special production build with profiling enabled. Read more about how to use this build at fb.me\/react-profiling<\/a>. <\/p>\n\n\n\n

Usage<\/strong> <\/p>\n\n\n\n

To profile the application, open React Dev tools<\/a>, start recording an activity, render any components and stop the recording. <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Example<\/strong>  <\/em><\/p>\n\n\n\n

As an example, on how to find performance measures of a component, I have created a basic App<\/strong> component, which has an input field and a Counter<\/strong> component. <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

As I type in the input field the App component changes its state and re-rendered itself with the updated input value. Now let Profile<\/strong> this in React Dev tool and see how our components got ranked based on the rendering time. <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

As you can see in the dev tool ranked view, it highlights the Counter component in yellow, <\/strong>this means we have some problem in this component, and we can optimize it. <\/p>\n\n\n\n

If you notice in the right side window, the Counter<\/strong> component re-render itself three times on every keystroke and takes a total time of 1.2ms on render. Although this component has nothing to do with the input value on the App component. <\/p>\n\n\n\n

In order to avoid this re-render, you can memorize your Counter component. I am not going to show you how to do that as it is not part of our topic right now. What I want to demonstrate here is how efficiently we can measure our app performance and bottlenecks through React Profiler. <\/p>\n\n\n\n

The Profiler is indeed useful but a bit cumbersome to perform an activity and record. There is another way to profile a component programmatically. That’s through React Profiler API<\/a>.  <\/p>\n\n\n\n

Using Profiler API is simple, you can do that in two steps. <\/p>\n\n\n\n

First, import Profiler from React in your file. <\/p>\n\n\n\n

import {Profiler} from \u201creact\u201d <\/code><\/p>\n\n\n\n

Secondly, wrap your component inside <Profiler \/>, <\/strong> <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

The Profiler takes two properties. An id<\/strong> to uniquely identify the commit and onRender<\/strong> callback that describe what was rendered and the length of time it took, includes following <\/p>\n\n\n\n