Tips for improving React performance

Tips for improving React performance

React makes it easy to create a fast user interface without putting a lot of effort into optimizing performance. However, there are some ways in which you can improve the performance of apps created with React. This is what we’ll be focusing on in this article, with tips on improving React performance. But first, let’s give you some context.

About React

Just to give you a quick intro, React (or ReactJS) is a JavaScript library to build UI interfaces on the web. React modifies the browser DOM using a browser-independent DOM system for performance and cross-browser compatibility, which means you can use the same HTML tags you use on the web. React is declarative, component-based, flexible and easy to learn. If you want more information about React and how it differs from React Native, you can take a look at our article on this topic.

8 tips for improving React performance

 

1. Use function/stateless components and React.PureComponent

Function components and PureComponent are two ways of optimizing React apps at a component level. The former prevents constructing class instances and reduces overall bundle sizes. As for the latter, when optimizing UI updates, you might want to convert function components to a PureComponent Class.

Do note, however, that when using React.PureComponent you should make sure that all its child components are either Pure or functional components, that Component State/Props are an immutable object, and that State/Props do not include a multi-level nested object.

2. Memoize React components

Memoization is a long-standing optimization technique typically used to speed up computer programs. Through memoization, the results of expensive function calls are stored and the cached results are returned whenever the same inputs reoccur. You can learn more about this technique in this article.

Using memoized functions makes your app run faster because, when a function with the same values as the previous one is called, it retrieves the result from the cache instead of executing function logic. This is a great way of improving React performance.

This link might come in handy when it comes to memoizing React components.

 

3. Avoid using an index as key when mapping arrays

Most React developers have, at some time, run into an “Each child in a list should have a unique ‘key’ prop” warning. However, if you go the lazy route and use the index as key, this can show incorrect data to your app since it is used to identify DOM elements, thereby negatively impacting app performance. If you use the same key when pushing or removing an item from the list, React simply assumes that the DOM element represents the same component. This is why it is advisable to use a unique property as key. If your data doesn’t have unique attributes, you may use the shortid module to generate a unique key. You can find more info on this topic here.

4. Avoid passing unnecessary props when using the spread operator

Let’s face it, passing props to JSX elements using the spread operation can be extremely convenient. However, there are dangers to overusing it and even React’s documentation suggests “using it sparingly”. Namely, if you’re not careful, you might end up passing unnecessary properties to your components or even invalid ones to the HTML in your DOM. 

5. Virtualize long lists

Rendering a large table or list of data often slows down app performance. This is when virtualization (also known as windowing) comes in handy. This technique only renders a subset of rows at any moment, dramatically reducing component re-rendering time. You can use libraries such as react-window or react-virtualized to find reusable components for displaying lists, grids and tabular data.

6. Use multiple chunk files

An app always begins with a few components. But as soon as you start adding features and dependencies, you can end up with a gigantic production file without even realizing it. A way to avoid this is to turn this into two separate files by separating your vendor, or third-party library code, from your app code using the CommonsChunkPlugin for webpack. This will give you a vendor.bundle.js file and an app.bundle.js file. Splitting your files means your browser caches less often and parallel downloads resources thereby reducing load time wait.

7. Using immutable data structures

Data immutability is an opinionated way of writing code that forces you to reflect on how you structure your app’s data flow. It stems from the functional programming world and can be applied to designing front-end apps. The benefits of data immutability include zero side effects; the fact that immutable data objects are easier to create, test and use; and that they make it easier to track changes.

Some of the optimized libraries that include a set of immutable data structures are Immutability Helper, Seamless Immutable and Immutable.js. Also, if you want to learn more about using immutability with ReactJS, you can find more information here.

8. Dependency optimization

Something else to keep in mind when improving React performance is dependency optimization. When you wish to optimize the application bundle size, you should definitely check how much code you are using from dependencies. If you are using Moment.js to include localized files for multi-language support, for example, you can use the moment-locales-webpack-plugin to remove any unused locales. You can find a comprehensive list of optimizable dependencies here. 

Final thoughts on improving react performance

There are definitely many little ways in which you can boost your web app’s performance. We have chosen our top 8 tips for improving React performance, and we hope they will serve you as well as they serve us!