React Performance optimization: React DevTool & Chrome DevTool

This is the 14th day of my participation in the August More Text Challenge

How can you use tools to find performance issues and tune React?

In daily development, we use two tools:

React DevTool
Chrome DevTool

React DevTool

React DevTool is a Chrome plugin provided by FaceBook that allows you to not only observe the state of your application during development, but also perform performance tuning. The main tuning method is to help us find redundant renderings.

The installation

First, install the React DevTool. Once installed, you’ll see it in the upper right corner of your browser (or tucked away) as shown in Figure 1. If you open a site that uses React, you’ll see the plugin icon lit up as shown in Figure 2.

Set up the

On your React project page, switch to the Components Tab, click the setting icon in the upper right corner, and check “Highlight updates when Components Render.”

This feature allows you to show which components have been updated (highlighted) as you navigate the page, like the following:

We saw that the side panel was also re-rendered when we simply added and subtracted the Counter component, which was obviously problematic.

To optimize the

At this point, we can go to the project code to check that it depends on the state of counter in the SidePanel.

SidePanel.js

// ...
const mapStateToProps = function (state) {
  return {
    router: state.router,
    examples: state.examples,
  };
};
// ...
Copy the code

We checked the code and found no use for examples, so we deleted them. After optimization, the +/- click only causes the Counter component to refresh, which we consider ok.

If the inside of the SidePanel does use one of the fields in Example, it is recommended to bind only that field and not the whole example, as well as avoid a lot of unnecessary re-rendering.

Chrome DevTool

Chrome DevTools, or Chrome Developer Tools, is a set of web authoring and debugging tools that are embedded in the Google Chrome browser.

Still on the Counter page, we switched to the Performance panel, which can collect Performance data for our operations on the page and help us locate Performance bottlenecks.

To test the performance bottleneck, we can slowdown the CPU (6x slowdown) and click the start recording button. When the recording starts, click Counter +/- and click the stop button.

We saw in summary that React spent most of his time on diff calculations (scripting), but not much on Rending and painting.

To see the cost of a particular area, hover over it and scroll to zoom in and out. You can see the updated contents of the SidePanel, Route, Link…

By using Performance, you can find components or functions that have a lot of room for Performance optimization.

The resources

New the React DevTools introduction: zh-hans.reactjs.org/blog/2019/0…