React is awesome! it allows you to start building apps with ease, be it small and simple apps or big and complex apps. As applications evolve, it is only natural for requirements to do so as well and, in consequence, you will eventually need to boost some performance out of your app. There are some problems you might encounter and luckily for you it’s not hard!

If, for now, you’re stuck building simple applications for learning purposes do not neglect these topics. Please, do browse them and keep them in mind for your future!

Let’s get to it then!

Long lists of data

This is a tricky one! When I first started working in React I hit this issue much sooner than I expected. I wanted to render a big list that would be infinite scrolled for more items and pretty soon it became clear that, with 1000+ items being rendered, the app started to lag a little bit.

react-virtualized is the answer!

This package uses a technique called “windowing”. Basically it will only render a small set of the total amount of rows reducing by a large amount the amount of DOM nodes created and the time it takes to render the list.

It gives us some components:

List — to help you render a common scrollable list

Grid — to help you render a data grid

Table — to help you render tabular data

Masonry — to help you render a cool looking list of cards (similar to Pinterest)

This package is truly amazing and as soon as you apply these components you will immediately see some big boosts in performance if long lists were your problem.

If you’re intimidated and by looking at react-virtualized you’re starting to get scared, there is no need to be. They have a wizard that suggests a starting point based on your requirements. Check it here!

Wasted renders

In big and complex apps, states and updates will be flying everywhere and it is to be expected multiple re-renders of the elements. It is up to you to deal with the really important task of avoiding reconciliation.

First off what is a wasted render?

A wasted render is when a component gets re-rendered when nothing changed within itself and the time that it took to render it was a complete waste. If nothing changes that component should not be rendered right?

What can you do to detect wasted renders?

First off, Install React Developer Tools for Chrome or Firefox

This will be your best companion to see which components can get optimized and which can’t.

To start looking for updates you can open up developer tools on your Chrome and go to the React tab. Once inside the React tab you will see your app’s JSX structure and some options. Toggle ON the option on Highlight Updates.

See a full example of this below actually running on Facebook!

React Developer Tools on Facebook

As you can see, with proper reconciliation control, as soon as he starts writing a comment, nothing else renders. You will need this tool many times as a React developer to carefully pinpoint what might be tanking your app’s performance.

You’ve identified your problematic Components. What can you do?

So you’ve tracked down those pesky components that are rendering needlessly and are taking up rendering time? Let’s take care of them with shouldComponentUpdate!

shouldComponentUpdate reconciliation example tree

Use shouldComponentUpdate() to let React know if a component’s output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior. shouldComponentUpdate() is invoked before rendering when new props or state are being received. Defaults to true . This method is not called for the initial render or when forceUpdate() is used.

Let’s say you have an Avatar component that renders the user’s photo at all times and if you click it, a dropdown opens below.

Just from specifying my example it is easy to understand that such a simple thing should not be re-rendering at all times. It is wasting time and resources.

With a quick shouldComponentUpdate refactoring your component can become a time-saver.

Avatar with shouldComponentUpdate

It receives the avatar url by props and has its own state so, in shouldComponentUpdate, we check if the url changed or if the options were toggled ON. If any of these statements gets verified then it should re-render.

You can even simplify it further! If you’re getting tired of making simple checks (only one prop or two) you can simply extend from React.PureComponent instead of Component because it does the checking for you.

React.PureComponent is similar to React.Component . The difference between them is that React.Component doesn’t implement shouldComponentUpdate() , but React.PureComponent implements it with a shallow prop and state comparison.

The first time I refactored a codebase to actually have reconciliation control the difference was night and day. I was amazed!