How Infinite Scroll Can Slow Your App

How can infinite scroll slow your app?

Imagine you're building a social media feed with infinite scrolls. You render some posts, then load more as the user scrolls.

As users scroll, more and more posts are rendered. This can lead to laggy scrolling because there are too many posts rendered at the same time.

How to solve this problem?

Social media apps solve this problem by rendering only visible posts. Which keeps the scrolling experience smooth and good user experience.

This pattern is called List virtualization. It not only improves scrolling performance but also keeps the initial page load fast by rendering only the visible elements.

The image below compares rendering with and without List virtualization.

Implementation Example

Here's a basic implementation using React and the react-window library:

Popular Virtualization Libraries

• React Virtualized
• React Window : A lightweight, modern replacement for React Virtualized

Cons of List Virtualization

• Implementation Complexity: It can be complex to implement, debug and maintain
• Search Limitations: Browser's built-in search (ctrl+f) is not possible since not all content is rendered (the solution is to add a custom search input at the top of the list)
• Accessibility Concerns: Some screen readers may have issues with dynamically changing content

You can learn more about this pattern in this article: Virtual Lists Pattern