A journey of a long list in React

Is virtual scroll always the answer for long lists? Discover a powerful alternative using IntersectionObserver for smoother, faster UIs.

#1about 5 minutes

The performance cost of re-rendering long lists

Rendering thousands of items naively causes significant JavaScript and layout overhead, leading to an unresponsive UI during re-renders.

#2about 4 minutes

Exploring common patterns for handling long lists

Websites like Google use traditional pagination, while others like Facebook and Unsplash use infinite scroll and skeleton loaders to manage large datasets.

#3about 3 minutes

How virtual scroll works using the windowing technique

Virtual scroll, also known as windowing, creates a smooth user experience by only rendering the items currently visible in the viewport.

#4about 5 minutes

Considering the limitations of virtual scroll libraries

Before choosing a library, consider its limitations regarding scroll restoration, deep linking, dynamic heights, and window-level scrolling.

#5about 5 minutes

The technical implementation of a virtual scroll component

Implementing virtual scroll requires calculating the total container height and the position of visible items, which is complicated by dynamic row heights.

#6about 4 minutes

Using skeleton loaders and the Intersection Observer API

The Intersection Observer API enables an alternative approach where lightweight skeleton placeholders are replaced with full content as they enter the viewport.

#7about 4 minutes