Trying to render all the data in a large list at once could overload the DOM tree. The best approach to improving performance depends on your use case.

Lists are an integral part of most web applications because they help display data in a more presentable format. But when an app tries to handle too much data in a list, it often leads to performance problems.

In this guide, we’ll outline some problems associated with bloated lists and walk through steps to overcome these performance challenges in React applications.

Prerequisites

To follow along with this tutorial, you’ll need the following.

• A general understanding of JavaScript and React
• npm greater than v5.2 or yarn
• Node version 12 or greater

Problem

Let’s create a sample application to demonstrate what happens to your app’s performance and the DOM tree when you try to render a large list of 10,000 records.

Launch your terminal and paste the code below to create a React application.

npx create-react-app render-list

Run the code below to install the Faker library, which we’ll use to generate random data to use in our application.

npm i faker

Next, go to the App component in the src directory and enter the code below.

import React from 'react';
import faker from 'faker'
import './App.css';

const data = new Array(10000).fill().map((value, index) => ({ id: index, title: faker.lorem.words(5), body: faker.lorem.sentences(4) }))

function App() {
  return (
    <div>
      {data.map(((item) => (
        <div key={item.id} className="post">
          <h3>{item.title} - {item.id}</h3>
          <p>{item.body}</p>
        </div>
      )))}
    </div>
  );
}
export default App;

Go the App.css file and add the lines of code below to add a little style to the list.

.post{
  background-color: #eee;
  margin: 2rem;
  padding: 1rem;
}
.pagination{
  margin: 1rem auto;
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  width: 50%;
}
.active{
  border: 1px solid black;
  border-radius: 100%;
  padding: 0 3px;
  outline: none;
}

The above code renders a list of 10,000 records.

Start the React application in your browser and open your console.

When the page loads, you’ll notice it takes time to render the list. There is also a noticeable lag when you scroll.

Below are four ways to solve list-related performance issues in React apps.

#react #javascript #developer