3 Simple ways to Optimize your React App

November 10, 2017
by Rahil Shaikh

React is normally super-fast. However, mid-sized React apps tend to not be as fast as they can be. This is in spite of the fact that React’s virtual DOM make for incredibly efficient UI updates. We know that this can be frustrating, since normally — React is a rapid force to be reckoned with.

This is a Guest post by Pontus Bergmark on ciphertrick.com

React works by starting with a root component which then branches out in a tree. These components then render the UI based on the data received. Once the users interact with the data, it will change — such as by clicking a button.

Whenever a change like this occurs, React uses the components to virtually re-render the UI. It uses an algorithm to compare the difference between these states — the current and the previous UI. It runs this algorithm on the two versions of the virtual DOM.

But before we start digging deeper into optimization, we need to…

Measure

Measure and benchmark your performance so you can see what’s actually slowing your app down. Use the react-addons-perf library to see your app’s performance. You will get a visual overview of your performance as graphs to see where you should be putting your time. Once you’ve got a clear idea of where you need to put the work, you can get to optimization.

And this obviously applies to any type of testing — regardless of whether you’re optimizing a single-page app or a WordPress site. Test, test, and then test again and ensure the results are reliable.

Make sure that you test with the minified production build. React includes many warnings, which may be helpful in themselves, but they enlarge and slow down the application. Therefore, always use the production version upon actual deployment.

Use React Developer Tools to check. If you visit a page in production mode, it will have an icon with a dark background.

Here are a few things that could be relevant for you to improve.

Skip Rendering Components

When React does the first render, it builds a tree of components. Once it re-renders due to a data change, it typically re-renders and diffs all the affected nodes. This can, obviously, be a big source of poor performance.

As your application gets larger, this will get increasingly worse and unreasonable. Thankfully, there’s a simple way to skip certain components. Use shouldComponentUpdate:

function shouldComponentUpdate(nextProps, nextState) {
    return true;
}

Only when this is true for any given component, will it trigger the render-diff process. Thus, if you need to prevent re-rendering of a component, simply ensure this function returns false.

Avoid Tight Coupling

A second problem is too tight coupling. That is, components know more than necessary about other components. Parent components should have minimal knowledge of their children, as it allows you to change the child’s behavior without informing the parent. Allowing the children to operate in this way is ideal.

To get around this, merge your data structure and use reference checks to track changes. This makes the use of shouldComponentUpdate easier.

If you’re using PureComponent for this, you need to ensure that all the children are also pure components. Otherwise, the entire functionality won’t play out as planned and you’ll still end up with poor performance.

Use Minification to Deliver Chunk Files

Minification removes all the data in a code file that isn’t required for execution. These files don’t have to be decompressed before either, making it a convenient technique to use. Minification is often used in React web apps — especially the single page applications.

That is because, in single page apps, you often bundle the front-end JavaScript in one file through minification. Normally, this isn’t a problem — unless the app grows beyond moderate size.

If this is the case, and the application grows sluggish, it’s good if you’re building in Webpack. Webpack allows you to split the code into several chunks and only deliver them to the browser as needed. Without code splitting, even delivering the bundled code to the browser can cause a significant delay.

There’s definitely more you can do, but these are three fairly straightforward fixes you should implement to optimize your React application.

Conclusion

React is generally an optimised library that can produce a great UI experience. But as noted, that’s not always the case —, especially with mid-sized apps. But by following these three simple ways of optimizing React, you should be well on your way to an optimized and fast app. Sure, there’s more you can do, but these fixes should be the first things you implement to optimize your React application.

About Author

Pontus Bergmark, from Sweden to Saigon, he is Digital Marketing Manager at Pangara in Vietnam, a company that connects clients with Vietnam’s top freelance developers. When he’s not obsessing over marketing, he can be seen in any of Saigon’s coffee shops.
 

About

Engineer. Blogger. Thinker. Loves programming and working with emerging tech. We can also talk on Football, Gaming, World Politics, Monetary Systems.

Free PDF

Subscribe and get AngularJS Tips PDF. We never spam!
First Name:
Email:

Leave a Comment