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 · WWC 2023

5:40 min

Accelerating DOM rendering with virtual scroll

Muhammad Ahsan Ayaz · WWC 2021

2:35 min

Optimizing long list rendering by implementing Lit virtualizer

Lucien Immink · WWC 2023

43 sec

Building declarative visual effects with scroll-driven animations

Cleyra Uzcategui Cleyra Uzcategui · WWC 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
almost 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

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo
Open session

World Congress 2026 North America

Fast by Design: A Masterclass in High-Performance Web Engineering

Aaron Grogg

Senior web developer, committed to improving the user experience by improving web performance

Aaron Grogg
Open session

World Congress 2026 North America

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

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

Testing React Backends Like a Pro: Mocking Databases with SQLite

David Morris

Solution Architect

David Morris
Open session

World Congress 2026 North America

Full Stack with Flutter - are we there yet?

Nemanja Stošić

Senior Flutter Developer

Nemanja Stošić

Related videos

The Journey of a Pixel in a React Application thumbnail
27:01
WWC 2025 • 12 months ago

The Journey of a Pixel in a React Application

Shem Magnezi

Out-of-Order Streaming — The Future of Web Development thumbnail
33:45
WWC Europe 2026 • about 1 month ago

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

Julian Burr

The Lean Web thumbnail
46:46
JS Congress • over 4 years ago

The Lean Web

Chris Ferdinandi

Catching up on the basics you don't really need that much code thumbnail
14:44
LIVE • about 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
WWC 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
WWC 2025 • 12 months 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.