Adam Klein
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.
Featured Partners
Related Videos
14:44Catching up on the basics you don't really need that much code
Chris Heilmann
21:35Build UIs that learn - Discover the powerful combination of UI and AI
Eliran Natan
27:01The Journey of a Pixel in a React Application
Shem Magnezi
43:11The State Of The Web
Jeremy Keith
40:24Snappy UI needs no Single-Page Application
Clemens Helm
30:40What the heck do "declarative" and "reactive" actually mean?
André Kovac
46:46The Lean Web
Chris Ferdinandi
30:07Accessibility in React Application
Julia Undeutsch
From learning to earning
Jobs that call for the skills explored in this talk.
Senior Web Applications Developer - JavaScript / React / HTML
Adaptive Financial Consulting
Municipality of Madrid, Spain
CSS
HTML
React
JavaScript
TypeScript
Senior Web Applications Developer - JavaScript/React/HTML
Adaptive Financial Consulting
Barcelona, Spain
CSS
HTML
React
JavaScript
TypeScript