WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2021 • Jun 29, 2021

A journey of a long list in React

Adam Klein

Virtual scrolling builds a bridge just ahead of users and dismantles it behind them. Master this technique and intersection observers to flawlessly render massive lists in React.

Pause
Mute Enter Fullscreen
#1 about 4 min

Performance considerations when rendering long lists natively

Painting thousands of DOM elements remains efficient until component re-renders bottleneck the main processing thread.

#2 about 3 min

Bottlenecks when re-rendering and fetching large data sets

Client-side frameworks struggle to compute target layouts after costly database queries and massive JSON serialization payloads.

#3 about 5 min

Practical design patterns for displaying large dataset results

Strategies combining server pagination and partial infinite scrolling mitigate the risks inherent to rendering endless components.

#4 about 4 min

Core concepts and mechanics behind virtual scrolling techniques

Windowing algorithms effectively map a smaller sliding viewport subset onto an artificially large document container.

#5 about 5 min

Evaluating open-source virtual scroll libraries versus custom implementations

Limitations surrounding strict DOM restoration states and variable block geometries consistently necessitate bespoke architectural solutions.

#6 about 5 min

Implementing custom virtual scrolling with mathematical layout calculations

Coordinating empty vertical footprints prevents rapid frame discarding across highly volatile list rendering operations.

#7 about 2 min

Optimizing scroll component performance through intelligent preloading strategies

Scaling object payload batches proportional to tracking velocity successfully projects the illusion of endless layouts.

#8 about 4 min

Lightweight rendering pipelines utilizing the browser intersection observer

Injecting native layout skeletons lets browser observers exchange dense nodes without forcing costly formula calculations.

#9 about 4 min

Optimization techniques for complex components and business logic

Executing redundant calculations outside synchronized event frames actively prevents JavaScript pipeline saturation and interface tearing.

#10 about 4 min

Deciding between server-side pagination and client-side virtual scrolling

Delegating initial dataset parsing logic upstream effectively limits bloated client-side dependencies before architectural migration requirements escalate.

#11 about 2 min

Evaluating element recycling capabilities inside modern frontend frameworks

Continuous change engine polling replaces the historic requirement for constructing external object pool memory managers.

#12 about 4 min

Applying windowing strategies to enterprise data tables and trees

Resolving deeply nested objects into flat recursive structures ensures uniform virtual rendering regardless of collapsable states.

#13 about 5 min

Preventing screen jitter utilizing native animation frame implementations

Offloading continuous position indexing exclusively behind native animation cycle gates smooths over unstable user interactions.

Matching moments

2:36 min

Optimizing long views with virtualized lists for smooth scrolling

Milica Aleksic Milica Aleksic +1 · World Congress 2023

5:40 min

Accelerating DOM rendering with virtual scroll

Muhammad Ahsan Ayaz · World Congress 2021

2:35 min

Optimizing long list rendering by implementing Lit virtualizer

Lucien Immink · World Congress 2023

43 sec

Building declarative visual effects with scroll-driven animations

Cleyra Uzcategui Cleyra Uzcategui · World Congress 2024

2:40 min

Balancing user experience with developer-driven layout trends

Chris Heilmann +2 · LIVE

4:52 min

Evaluating performance impacts of advanced CSS animations

Aaron T. Grogg · Coffee With Developers

More from World Congress 2021

Micro Frontends with Module Federation: Why and How? thumbnail
45:40
about 5 years ago

Micro Frontends with Module Federation: Why and How?

Manfred Steyer

Data Science on Software Data thumbnail
48:10
about 5 years ago

Data Science on Software Data

Markus Harrer

The journey from developer to devops - what i've learnt along the way thumbnail
42:44
about 5 years ago

The journey from developer to devops - what i've learnt along the way

Liam Hurrel, Alireza Chegini

How Data is Shaping our Games thumbnail
43:30
about 5 years ago

How Data is Shaping our Games

Johanna Pirker

Cross platform Augmented Reality development with React Native thumbnail
40:50
about 5 years ago

Cross platform Augmented Reality development with React Native

Vladimir Novick

How to Build a Monetization Strategy Based on User's in-app Behavior thumbnail
38:59
about 5 years ago

How to Build a Monetization Strategy Based on User's in-app Behavior

Natalie Sieradzki

Upcoming sessions on this topic

Open session

World Congress 2026 North America

September 24, 2026 · 14:50–15:20

Stage 9

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo
Open session

World Congress 2026 North America

September 25, 2026 · 11:00–11:30

Stage 7

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer at Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

September 24, 2026 · 12:50–13:20

Stage 7

Architecting Agentic Apps: WebMCP, A2UI, and Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

September 25, 2026 · 10:20–10:50

Stage 9

Testing React Backends Like a Pro: Mocking Databases with SQLite

David Morris

Solution Architect at Leidos

David Morris
Open session

World Congress 2026 North America

September 24, 2026 · 14:10–14:40

Stage 7

Designing High-Performance AI APIs: Lessons from Serving Millions of Real-Time Requests

Wayne Liu

Chief Growth Officer and Americas President of Perfect Corp.

Wayne Liu
Open session

World Congress 2026 North America

September 25, 2026 · 16:10–16:40

Stage 4

Speed up your CI/CD pipelines by caching build & runtime artifacts

Thijs Feryn

Technical Evangelist at Varnish Software

Thijs Feryn

Related videos

The Journey of a Pixel in a React Application thumbnail
27:01
World Congress 2025 • about 1 year ago

The Journey of a Pixel in a React Application

Shem Magnezi

Out-of-Order Streaming — The Future of Web Development thumbnail
33:45
World Congress 2026 Europe • 2 months ago

Out-of-Order Streaming — The Future of Web Development

Julian Burr

The Lean Web thumbnail
46:46
JS Congress • almost 5 years ago

The Lean Web

Chris Ferdinandi

Catching up on the basics you don't really need that much code thumbnail
14:44
LIVE • over 2 years ago

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

Chris Heilmann

Challenges of building React and React Native apps thumbnail
24:10
World Congress 2022 • about 4 years ago

Challenges of building React and React Native apps

Milica Aleksic, Stefan Nikolic

Building Interactive Async UI with React 19 and Ariakit thumbnail
25:22
World Congress 2025 • about 1 year ago

Building Interactive Async UI with React 19 and Ariakit

Aurora Scharff

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.