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 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
over 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
over 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

React Under Fire: Rendering Performance for Streaming Agent UIs

  • Abhirupa Mitra

    Slack

    Senior Member of Technical Staff

Open session

Designing for Every Direction: Logical CSS for Global, Adaptive, and Effortlessly Reversible UIs

  • Vidhya Krishnamoorthy

    Morgan Stanley

    VP, Software Engineering Manager

Open session

From Profiler to Production: Measuring What Actually Matters in React & React Native

  • Andrei Tazetdinov

    Dynatrace

    React Native Developer

Open session

Build a Zero-Cost AI Agent in Your Browser

  • Aishwarya Mathuria

    Adobe

    Computer Scientist

  • Nishant Thakur

    Adobe

    Senior Computer Scientist

Open session

How We Cut Our API's p99 Latency from Minutes to Under a Second

  • Deepak Agrawal

    Atlassian

    Principal Software Engineer

Open session

AI Is the Easy Part: Why Faster Engineers Don't Make Faster Businesses

  • Bharat Sharma

    Booking

    Senior Engineering Manager

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 β€’ 3 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 β€’ over 4 years ago

Challenges of building React and React Native apps

Milica Aleksic, Stefan Nikolic

Uncharted Territories of Web Performance - Andrew Burnett-Thompson and David Burleigh thumbnail
49:57
Coffee With Developers β€’ 12 months ago

Uncharted Territories of Web Performance - Andrew Burnett-Thompson and David Burleigh

Andrew Burnett-Thompson, David Burleigh

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.