How To Improve Rendering Performance in a 1,000-Item React List

Let’s ensure that our web apps scroll efficiently

Photo by Negative Space on Pexels.

Imagine you are building some kind of application with React that requires you to show a long list of items. Say, 1,000 items. What are your options? Just render the whole thing at once?

Today, my goal is to show you the problem so that you understand what we are solving and then present a solution.

Let's get started!

Create the Project

At this point, all of you should know how to create a new React application from the command line using create-react-app. Just go to your terminal and run the following command to get going with a brand new React application:

npx create-react-app long-list-app

Let’s Render 1,000 Items

OK, let me first show you the problem. Have a look at the following component:

In this component, we are generating 1,000 names and rendering them inside a list. Now let’s have a look in the browser:

Inefficient rendering

Although our window is capable of showing six items, from the console, we can see that 1,000 items are being rendered in the background!

This inefficient rendering can make your application really slow.

Now Show Me the Code!

We will use an awesome library named react-virtualized. The concept is really simple and elegant: Don’t render stuff you don’t see on the screen!

First, install the dependency:

yarn add react-virtualized

What this library does is export some wrapper components to wrap around your list. You provide the height, width, and a function to render, and the library…