Adam Klein

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.

A journey of a long list in React
#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

Best practices for optimizing scrolling performance

Improve scrolling smoothness by throttling scroll events, tuning the render-ahead buffer, minimizing re-renders, and simplifying complex list items.

#8about 13 minutes

Q&A on pagination, tables, and implementation details

The speaker addresses when to choose pagination over virtual scroll and how to apply these performance techniques to tables and tree structures.

Related jobs
Jobs that call for the skills explored in this talk.

Designer

Andrew Comp

Andrew Comp
Berlin, Germany

Intermediate
Java
JavaScript

Matching moments

Optimizing scrolling performance in React Native
02:37 MIN

Optimizing scrolling performance in React Native

Optimizing Your App for Success: Tips and Techniques for managing slow devices

Unlock full access

Log in or set up an account to access this feature and more.

Rendering large lists efficiently with virtualization
01:21 MIN

Rendering large lists efficiently with virtualization

Challenges of building React and React Native apps

Unlock full access

Log in or set up an account to access this feature and more.

Optimizing large lists with virtual scrolling
05:40 MIN

Optimizing large lists with virtual scrolling

Angular <> Angular CDK - Awesomeness Combined

Unlock full access

Log in or set up an account to access this feature and more.

Building high-performance lists with the virtualizer lab
02:43 MIN

Building high-performance lists with the virtualizer lab

Why LIT is Fire

Unlock full access

Log in or set up an account to access this feature and more.

How React uses the virtual DOM for updates
02:04 MIN

How React uses the virtual DOM for updates

The Journey of a Pixel in a React Application

Unlock full access

Log in or set up an account to access this feature and more.

Why developers and businesses choose to use React
01:18 MIN

Why developers and businesses choose to use React

React and the power of visualisation

Unlock full access

Log in or set up an account to access this feature and more.

Live coding an editable list with web components
16:38 MIN

Live coding an editable list with web components

Frameworkless: How to use Web-Components in production?

Unlock full access

Log in or set up an account to access this feature and more.

Exploring modern tools for web interaction and analysis
08:03 MIN

Exploring modern tools for web interaction and analysis

WeAreDevelopers LIVE - the weekly developer show with Chris Heilmann and Daniel Cranney

Unlock full access

Log in or set up an account to access this feature and more.

Featured Partners

Related Videos

See all videos
Catching up on the basics you don't really need that much code14:44

Catching up on the basics you don't really need that much code

Chris Heilmann

Build UIs that learn - Discover the powerful combination of UI and AI21:35

Build UIs that learn - Discover the powerful combination of UI and AI

Eliran Natan

The State Of The Web43:11

The State Of The Web

Jeremy Keith

The Journey of a Pixel in a React Application27:01

The Journey of a Pixel in a React Application

Shem Magnezi

The Lean Web46:46

The Lean Web

Chris Ferdinandi

What the heck do "declarative" and "reactive" actually mean?30:40

What the heck do "declarative" and "reactive" actually mean?

André Kovac

To New Frontiers: The Future of Frontend Development26:00

To New Frontiers: The Future of Frontend Development

Rainer Hahnekamp

Snappy UI needs no Single-Page Application40:24

Snappy UI needs no Single-Page Application

Clemens Helm

Related Articles

View all articles
AM
Ashutosh Mishra
16 Best Free React UI Libraries in 2025
Web development is moving incredibly fast. New features pop up all the time, but there's one constant issue that keeps coming up: keeping your app's interface looking attractive and impressive. While new features are born and killed as the project gr...
16 Best Free React UI Libraries in 2025
CH
Chris Heilmann
Dev Digest 136 - No JS(on) of mine
News and ArticlesDouglas Crockford is our featured video, so let's talk about evolving JavaScript and all things JSON. Judicious JSON explains all the weird things in it, you can learn why it can be incredibly slow, people wonder what even is a JSON ...
Dev Digest 136 - No JS(on) of mine
EM
Eli McGarvie
Top 10 Svelte UI Libraries in 2025
As Svelte gains traction among developers for its impressive performance and simplicity, the need for robust UI libraries becomes increasingly apparent. UI libraries can provide developers with the necessary building blocks to easily create beautiful...
Top 10 Svelte UI Libraries in 2025

From learning to earning

Jobs that call for the skills explored in this talk.