{"id":13609,"date":"2021-11-06T17:00:33","date_gmt":"2021-11-06T17:00:33","guid":{"rendered":"https:\/\/engineering.lusha.com\/blog\/?p=13609"},"modified":"2021-11-23T07:31:23","modified_gmt":"2021-11-23T07:31:23","slug":"improve-performance-using-react-developer-tools","status":"publish","type":"post","link":"https:\/\/engineering.lusha.com\/blog\/improve-performance-using-react-developer-tools\/","title":{"rendered":"Improve Performance using React Developer Tools"},"content":{"rendered":"

When React came on the scene it all of a sudden became easier to create complex frontend applications with minimum consideration for performance. This is all thanks to React’s virtual DOM, which manages our component tree and interacts with the browser’s DOM, adding, removing, or altering elements from it.<\/p>\n

Wait, this doesn’t mean that writing a React application will resolve and remove all performance issues. These issues come up as a result of misunderstandings of the component’s lifecycle, bad design, or writing complex components without optimizing them.<\/p>\n

React DevTools to the rescue \ud83d\ude80<\/p>\n

Setting up<\/h2>\n

First thing first, make sure that on whatever browser you are using, React DevTools extension is installed.
\nOnce you’re all set up, let’s look at the example below.<\/p>\n

We are focusing on a simple project that pulls characters from the Rick and Morty REST API<\/a> and presents them.<\/p>\n

\"\"<\/p>\n

Let’s deep dive into the two main features that will help us understand how to improve our components.<\/p>\n

Components<\/strong><\/h2>\n

The Components tab presents the ability to watch and manipulate our React component tree.
\nClicking the Components tab under your browser’s dev tools will open the following window:<\/p>\n

\"\"<\/p>\n

Selecting a specific component from the component tree on the left panel will load the right one with relevant information and possible actions. In the right-hand side panel, you’ll be able to alter the component’s state and the component will react accordingly.<\/p>\n

\"\"<\/p>\n

To test and debug a specific component, make sure you get to know the icon buttons located on the top right-hand side.<\/p>\n

\"\"<\/p>\n

These buttons allow you to suspend a component (if you are using Suspense), focus on its DOM element, log the component data to the console or get to the component’s definition on your code.<\/p>\n

Great. Got it.<\/p>\n

But how does that help me optimize my components? And what do optimized components even look like?<\/p>\n

Let’s start with the basics: a component should be kept under 16ms, to fit today’s monitors that refresh at a rate of 60Hz (calculating milliseconds will be 1000\/60 = 16.66). Also, the human eye will perceive a good non-laggy animation when it has 60fps.<\/p>\n

Once we’ve got our component size right, let’s move on.<\/p>\n

Profiler<\/strong><\/h2>\n

Helps us locate pitfalls and points out areas in our program that need improving.<\/p>\n

Settings<\/h3>\n

Before we dive in, let’s make sure that two options are checked under the React Developer Tools settings:
\n– Highlight updates when components render<\/strong> (General)
\n–\u00a0Record why each component rendered while<\/strong> profiling<\/strong> (Profiling)<\/p>\n

You’ll also find other settings such as filtering irrelevant components from the view, debugging options, and profiling options.<\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n

Now, the browser will highlight the components that are being rerendered whenever we are interacting with our application.<\/p>\n

\"\"<\/p>\n

We can already see that clicking on a component will affect that component alone, but the actual result is that all the other components are being rendered as well.<\/p>\n

Profiling<\/h3>\n

Profiling your application means that you can record your component tree behavior for a required period of time and see how they performed.<\/p>\n

Let’s click on a result once again but this time profile it.<\/p>\n

\"\"<\/p>\n

What we are seeing here is a graph of our components that were affected by this action.<\/p>\n

Next to each, we see the total time that the render took (including the render time of its children).
\nThere are two possible views:
\n– Flamegraph –<\/strong>\u00a0shows us the rendering timeline.
\n– Ranked –<\/strong>\u00a0order the components by render time.<\/p>\n

In the example above, we can see the entire App component took about 200ms to render. Way too long for our taste. So let’s try something else.<\/p>\n

In order to understand how to improve performance, you’ll have to know the code.
\nLet’s look at three components of this code: App<\/code>, Results<\/code>, and Result<\/code>.<\/p>\n