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.

Matching moments

Organizing a developer conference for 15,000 attendees
01:32 MIN

Organizing a developer conference for 15,000 attendees

Cat Herding with Lions and Tigers - Christian Heilmann

Increasing the value of talk recordings post-event
04:57 MIN

Increasing the value of talk recordings post-event

Cat Herding with Lions and Tigers - Christian Heilmann

Selecting strategic partners and essential event tools
03:17 MIN

Selecting strategic partners and essential event tools

Cat Herding with Lions and Tigers - Christian Heilmann

Using content channels to build an event community
04:49 MIN

Using content channels to build an event community

Cat Herding with Lions and Tigers - Christian Heilmann

The only frontend stack that truly matters
11:10 MIN

The only frontend stack that truly matters

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Rapid-fire thoughts on the future of work
02:44 MIN

Rapid-fire thoughts on the future of work

What 2025 Taught Us: A Year-End Special with Hung Lee

How a broken frontend culture impacts the web
04:02 MIN

How a broken frontend culture impacts the web

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

The industry's focus on frameworks over web fundamentals
11:32 MIN

The industry's focus on frameworks over web fundamentals

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Featured Partners

Related Videos

See all videos
The Journey of a Pixel in a React Application27:01

The Journey of a Pixel in a React Application

Shem Magnezi

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

Building Interactive Async UI with React 19 and Ariakit25:22

Building Interactive Async UI with React 19 and Ariakit

Aurora Scharff

The Lean Web46:46

The Lean Web

Chris Ferdinandi

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

To New Frontiers: The Future of Frontend Development26:00

To New Frontiers: The Future of Frontend Development

Rainer Hahnekamp

Next.js Unleashed: Optimizing Web Vitals for superior User Experience26:44

Next.js Unleashed: Optimizing Web Vitals for superior User Experience

Eileen Fürstenau

Challenges of building React and React Native apps24:10

Challenges of building React and React Native apps

Milica Aleksic & Stefan Nikolic

Related Articles

View all articles
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering
CH
Chris Heilmann
Building a "shoutout" component in plain HTML/CSS/JavaScript
Every Wednesday we meet at noon to talk about a lot of tech news, tools and resources in something we call WeAreDevelopers Live . We go live on YouTube and afterwards we cut out short videos to post on social media. What we needed was an obvious “sho...
Building a "shoutout" component in plain HTML/CSS/JavaScript
S
SciChart
The Fastest JavaScript Charts - Built for React and Beyond
For most developers, browser charting works fine — until it doesn’t. Once you push beyond tens of thousands of points, add live streaming, or need advanced interactions, the story changes: frame drops, frozen dashboards, memory issues. That’s where S...
The Fastest JavaScript Charts - Built for React and Beyond

From learning to earning

Jobs that call for the skills explored in this talk.