React is a popular front-end library that’s built and used by the developers at Facebook and Instagram. React has received an overwhelming response over the years for its simplicity and the ease with which it lets us compose view components. One of the major reason why React is popular is that it has a very similar framework called React Native that lets you build mobile applications for Android and iOS.   

Although React and React Native are great, there are places where they might appear to not live up to the hype — particularly in terms of performance. For instance, when you introduce a new component into your application, chances are that it might not fit right in. There might be noticeable lags and glitches and broken animation even though the code might look okay. The reason is that your approach might not be that great! In this article, we’re going to cover the top things that you can do to boost your React performance.

Optimize React for Production

A minified production build is faster and optimized for heavy workload whereas a development build is meant to highlight errors and warnings in the console. Although these warnings help the developer debug errors, they can directly impact the performance of the application.

If you bootstrapped the application using create-react-app, you can get a production build by running npm run build. If you’re using webpack, you can build a production environment by running webpack -p. There are ways to compress the bundle size even further, but you need to take that path only if the initial load time is noticeably slow.

Optimizing your application’s resource is another thing that you need to consider. Resources such as images, icons, and other media files can slow down the application if they are rendered uncompressed. You can use server-side optimization techniques so that various versions of the images are stored of different quality. Alternatively, you can use cloud solutions like Cloudinary and Amazon S3 to manipulate images in the cloud.

Preventing Unnecessary Rendering using shouldComponentUpdate

React re-render the whole Component when the props are updated. However, some of the DOM nodes do not require to be updated and re-rendering them results in something known as wasted render. The process of re-rendering and updating the DOM is usually fast, but when you have hundreds of component, there could be a noticeable slowdown. To alter the default implementation, you can use a lifecycle hook called shouldComponentUpdate(). Before the rendering process starts, shouldComponentUpdate() is triggered and it returns true by default.

shouldComponentUpdate(nextProps, nextState) {
  return true;

If you’re sure that your component doesn’t need to re-render regardless of whether the props update or not, you can return false to skip the rendering process.

Optimize Rendering Using PureComponent

React.PureComponent is an alternative to shouldComponentUpdate that lets you optimize React components and the improvements are significant. You can import a PureComponent into your project from the ‘react’ module. PureComponent alters the shouldComponentUpdate hook and performs a shallow check to decide if the component needs to be re-rendered or not.

When a component is Pure, React makes the following check:

if (this._compositeType === CompositeTypes.PureClass) {
  shouldUpdate = !shallowEqual(prevProps, nextProps) 
  || ! shallowEqual(inst.state, nextState);

The most significant part here is the use of shallowEqual. React performs a shallow check of the props and the state and hence, deeply nested objects and arrays will be ignored. Pure components help you avoid duplicating the code. But if you’re going to mutate the state and then use Pure components, you’ll do yourself more harm than good. So, I’d recommend taking this step only after you’ve clearly understood how to actually use Pure components and why they can improve performance significantly.

Measuring React Performance

Measuring and analyzing the actual performance using Development tools like Chrome DevTools and React Developer Tool can help you debug the performance issues. The modern browsers have performance profiling and development tools built into the browser console.

React, for instance, creates a mark and trace event for each component it renders. So, you can head to the Chrome DevTools and create a performance profiler audit. This will initiate a performance trace of the React application and the trace will automatically stop once the app is fully loaded.

In the development mode, you can get visual representations that depict how the components mount, unmount and update.

Screenshot of a Flamegraph of a React application in Chrome DevTools

If there is any noticeable glitch, you can use this data to analyze the exact component that’s slowing you down.

Micro-optimizations: Stateful vs. Stateless Component

React lets you compose components in two ways -- you can either use functional components or class components. Functional components are easier to write and read, and they are particularly useful for building the UI or the presentational layer. This is because the presentational components do not usually have a state. Class components, on the other hand, are ideal for building containers. The containers make API calls, dispatch actions to the store and use the state to hold data. They then pass the data as props to the presentational components.

Until React v16 was released, both the functional components and the class components had the same code path. Although the functional components appeared to have lesser lines of code, they were not optimized or offered no speed improvements because they were converted to Class components under the hood. However, the scenario has changed with the release of V6.

Here is an excerpt from the official docs:

Functional components in React 16 don't go through the same code path as class components, unlike in previous version where they were converted to classes and would have the same code path. Class components have additional checks required and overhead in creating the instances that simple functions don't have.

But these are micro-optimizations and you won’t find any serious improvement in performance if you’re running small or medium-sized application.

Final Words -- Don’t Optimize Unless You Need To

React is natively fast most of the time. When you are starting out, you don’t need to be spending your resources and time on optimization. Start optimizing only when you see actual trouble and not before. I recommend this approach because optimizing React is easy compared to other front-end platforms out there. Use a performance analysis tool to accurately identify the component that’s causing you trouble and then start fixing your component’s structure to boost the performance.

If you have any thoughts or experiences to share about scaling React, feel free to share them in the comments.



Article suivant

5 Business Trends To Commit To In 2018