Optimizing Performance in React Applications: 5 Proven Methods

The Challenge of Large Lists

When building web applications, lists are an essential component. However, when dealing with massive amounts of data, performance issues can arise, leading to sluggish scrolling and a poor user experience. In this guide, we’ll explore five effective methods to overcome these performance challenges in React applications.

Understanding the Problem

To demonstrate the issue, let’s create a sample application that renders a list of 10,000 records. We’ll use the Faker library to generate random data. Upon launching the application, you’ll notice a significant lag when scrolling. This is due to the rendered DOM elements, not the large array of data itself.

import React from 'react';
import { faker } from '@faker-js/faker';

const records = Array.from({ length: 10000 }, () => ({
  id: faker.random.number(),
  name: faker.name.findName(),
}));

const List = () => (

{records.map((record) => (
• {record.name}

))}

);

Conditional and Dynamic Rendering

In React, conditional rendering refers to rendering components based on specific conditions. Dynamic rendering, on the other hand, involves looping over an array of data using the map() method. Both approaches have their pros and cons, which we’ll discuss later.

Method 1: Pagination

One effective way to handle large lists is through pagination. By rendering data in pages, you control the amount of data displayed, reducing the stress on the DOM tree. The react-paginate library provides a pagination component that accepts props to navigate through your data.

import React from 'react';
import ReactPaginate from 'react-paginate';

const PaginatedList = () => {
  const [pageNumber, setPageNumber] = React.useState(0);

  const recordsPerPage = 10;
  const pagesVisited = pageNumber * recordsPerPage;

  return (

  );
};

Method 2: Infinite Scroll

Another approach is infinite scroll, which appends data to the end of the page as you scroll down. Only a subset of data is loaded initially, and more data is appended as you scroll. We’ll use the react-infinite-scroller library to implement this method.

import React from 'react';
import InfiniteScroll from 'react-infinite-scroller';

const InfiniteList = () => {
  const [hasMoreItems, setHasMoreItems] = React.useState(true);
  const [items, setItems] = React.useState(records.slice(0, 10));

  const loadMore = () => {
    if (items.length >= records.length) {
      setHasMoreItems(false);
      return;
    }

    setTimeout(() => {
      setItems(items.concat(records.slice(items.length, items.length + 10)));
    }, 1000);
  };

  return (

{items.map((item) => (
• {item.name}

))}

    
  );
};

Method 3: react-virtualized

react-virtualized is a powerful library designed for rendering large lists and tabular data. It uses a technique called windowing, which renders only the visible parts of a list to the screen. This library offers a range of useful components, including Collection, Grid, List, Masonry, and Table.

import React from 'react';
import { FixedSizeList } from 'react-window';

const VirtualizedList = () => {
  return (
    
      {({ index, style }) => (

      )}
    
  );
};

Method 4: react-window

react-window is a set of components for efficiently rendering large lists in React. A complete rewrite of react-virtualized, this library addresses shortcomings related to size and speed. It also covers more edge cases than react-virtualized.

import React from 'react';
import { FixedSizeList } from 'react-window';

const WindowedList = () => {
  return (
    
      {({ index, style }) => (

      )}
    
  );
};

Method 5: React ViewPort List

React ViewPort List utilizes a technique called windowing, rendering only a portion of the list at a time. This significantly reduces the time it takes to re-render components and the number of DOM nodes created. It also supports vertical and horizontal lists, scroll to index, flexbox alignment, and dynamic height and width for viewport.

import React from 'react';
import { ViewportList } from 'react-viewport-list';

const ViewportListExample = () => {
  return (
    
      {records.map((record) => (

      ))}
    
  );
};

Choosing the Right Approach

When handling large lists, it’s essential to consider your use case. If you prefer to render all data in one place, infinite scroll or a windowing technique might be the best choice. Otherwise, pagination could be the way to go. By implementing these methods, you’ll be able to optimize performance and provide a seamless user experience in your React applications.