Render Large List in React

Photo by Lautaro Andreani on Unsplash

As the size of the list grows, the DOM (Document Object Model) tree also grows, leading to performance issues like slow rendering, janky scrolling, and high memory usage.

Why is rendering a massive list in a web browser a challenging task?

How to Tackle Rendering Large Lists in React?

If you render tens of thousands of complex list items, you have to use optimisation techniques, no matter how capable your end user’s hardware is.

List of solutions

Keep Your Render Tree Small

1. Lean Render tree boosts overall performance, because the more DOM elements there are, the more space needs to allocated by browser.
2. Additionally more time will be taken by the browser in layout stage.
3. This becomes extremely critical while rendering a massive list.
4. Reducing even a single div can bring out an observable difference in terms of performance.

Infinite Scrolling

1. It is one of the technique to optimise the performance while handling large list.
2. Only render those items which are required to fill entire page length.
3. Then add more items as the users scrolls down.
4. We can implement this using the react-infinite-scroller library.
5. Instead of rendering all 10,000 items at once, we only rendered the first few items needed to render the portion of the page in the user’s view.

Windowing(or Virtualization)

1. It is a technique in which you only render the portion of the list that is visible to the user at any time.
2. Unlike, infinite scrolling the DOM always has a constant number of elements.
3. Windowing shines when each item in your list has a fixed height.
4. That way it becomes easy to calculate which items need to be added or removed from the DOM based on the scroll.
5. Furthermore, the memory usage of your page stays constant, as the number of DOM elements stays constant, no matter where the user has scrolled.

One More Solution

1. Implement your own lazy loading of DOM elements using an Intersection Observer API.
2. First, add enough components to fill up your viewport.
3. Get the viewport height using getBoundingClientRect and divide that by your approximate minimum item height.
4. Add 1 to this count for good measure.
5. Now add a dummy component below it (this component doesn’t need to show anything; it just needs to exist at the bottom of your list).
6. Attach the intersection observable to this component, and whenever this component is in view, add more items to your list to be rendered in the DOM.
7. This way you’ll end up developing a simple infinite-scroll solution.

Resources

1. https://www.youtube.com/watch?v=1JoEuJQIJbs&ab_channel=CoderOne
2. https://blog.logrocket.com/render-large-lists-react-5-methods-examples/
3. https://blog.logrocket.com/rendering-large-lists-react-virtualized/