Boosting Performance with List Virtualisation in React

Shivam — Fri, 23 Feb 2024 18:57:04 +0000

Nowadays, every web app requires capabilities such as endless scrolling to improve the user experience. I recently encountered the same issue at work, which requires comparable capabilities when a list has hundreds or thousands of items. I began looking for a suitable solution and came upon something called the IntersectionObserver API. Let's look at it in depth.

Introduction:

Rendering large lists in React applications can significantly impact performance, especially when dealing with hundreds or thousands of items. This blog post dives into list virtualization, a technique to optimize rendering and improve user experience for extensive lists. We'll explore how to implement list virtualization in React using the IntersectionObserver API.

What is List Virtualization?

List virtualization is an optimization technique that renders only the visible items in a list at any given time. As the user scrolls, additional items are rendered on-demand, creating the illusion of a continuous list while minimizing the actual number of rendered elements. This significantly improves performance and responsiveness, especially for long lists.

Enter `IntersectionObserver`:

The IntersectionObserver API provides a mechanism to monitor the intersection of an element with its ancestor or the viewport. We can leverage this API to detect when list items enter or leave the visible area and trigger rendering accordingly.

How the `IntersectionObserver` API works?

The Intersection Observer API allows code to register a callback function when an element enters or exits an intersection with another element or the viewport.

How to implement it React?

Let's build a simple example of a virtualized list in React using IntersectionObserver:

Setting Up the Project:

Start by creating a new React project using your preferred method (e.g., Create React App).

Creating the List Component:

import React, { useRef, useState, useEffect } from 'react';

const VirtualizedList = ({ items }) => {
  const [visibleItems, setVisibleItems] = useState([]);
  const listRef = useRef(null);

  const handleIntersect = (entries) => {
    const newVisibleItems = entries.filter((entry) => entry.isIntersecting).map((entry) => entry.target);
    setVisibleItems([...visibleItems, ...newVisibleItems]);
  };

  useEffect(() => {
    const observer = new IntersectionObserver(handleIntersect);
    observer.observe(listRef.current);

    return () => observer.disconnect();
  }, []);

  return (
    <div ref={listRef}>
      {visibleItems.map((item) => (
        <div key={item.id}>{item.content}</div>
      ))}
    </div>
  );
};

export default VirtualizedList;

Explanation:

This component takes an items prop containing an array of data objects.
The visibleItems state stores the currently visible items in the list.
The listRef ref holds a reference to the list container element.
The handleIntersect function handles the IntersectionObserver callback, updating the visibleItems state based on the intersecting elements.
The useEffect hook sets up the IntersectionObserver, observing the list container for visibility changes.
The component renders only the visibleItems within the list container.

Using the VirtualizedList:

import VirtualizedList from './VirtualizedList';

const items = Array(1000).fill(null).map((_, index) => ({
  id: index,
  content: `Item ${index + 1}`,
}));

function App() {
  return (
    <div>
      <h1>Virtualized List</h1>
      <VirtualizedList items={items} />
    </div>
  );
}

export default App;

Explanation:

This code creates a list of 1000 items and renders only the visible ones using the VirtualizedList component.

Benefits and Considerations:

Improved Performance: List virtualization significantly reduces the number of rendered elements, leading to smoother scrolling and faster UI responsiveness.
Memory Efficiency: By rendering only visible items, memory usage is optimized, especially for large datasets.
Customization: You can customize the threshold for visibility and the number of items to pre-render for optimal performance based on your specific use case.
Enhanced Scalability: Enables efficient handling of large datasets without performance degradation.

Conclusion:

List virtualization with IntersectionObserver is a powerful technique for building performant and scalable React applications. By implementing this approach, you can ensure a smooth user experience even when dealing with large datasets. Remember to tailor the implementation to your specific needs and continuously improve your skills in building efficient and user-friendly applications.

Further Exploration:

Explore libraries like react-window or react-virtualized for more advanced list virtualization functionalities.
Experiment with different optimization techniques beyond list virtualization to create even more performant React applications.

I hope this blog helps you get started with list virtualization in React!
If you have any questions or recommendations, please share them in the comments section.

DEV Community: Shivam