> Markdown version of [/videos/203-a-journey-of-a-long-list-in-react](https://www.wearedevelopers.com/videos/203-a-journey-of-a-long-list-in-react). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md). --- # A journey of a long list in React 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. - **Speakers:** Adam Klein - **Event:** World Congress 2021 - **Published:** June 29, 2021 - **Duration:** 43:08 - **URL:** https://www.wearedevelopers.com/videos/203-a-journey-of-a-long-list-in-react ## Summary Rendering massive data sets in modern frontend applications introduces significant performance bottlenecks, particularly when sorting or shifting tabs triggers heavy DOM re-renders. While native browser paint optimizations handle static scrolling well, rapid layout recalculations and heavy JavaScript execution quickly degrade user experience. Instead of forcing native rendering, developers must evaluate targeted architectural patterns, starting with classic API-driven pagination. Pagination often provides the most reliable user experience for shareable URLs and fixed-state navigation, but when seamless engagement is required, virtual scrolling provides a powerful alternative.<br><br>For uninterrupted scrolling experiences, virtual scrolling (or windowing) dynamically renders only the viewport items alongside a small calculated off-screen buffer. This approach operates like a continuous bridge built just ahead of the user and dismantled behind them, keeping the DOM lightweight. However, implementing virtual scroll introduces hidden complexities, such as navigating back to exact scroll positions, managing dynamic or expandable item heights, and dealing with inaccessible root-level footers. Because of these functional constraints, engineering teams must carefully weigh building custom windowing logic against navigating the inherent limitations of standard open-source rendering libraries.<br><br>An effective alternative to pure virtual scrolling is combining pre-rendered skeleton components with the browser's Intersection Observer API, progressively swapping lightweight dummy wrappers for heavier targeted content as they enter the viewport. This delivers an infinite scroll experience without the mathematical element-height overhead of strict container windowing. Regardless of the chosen architecture, maintaining fluid web performance requires debouncing scroll events via requestAnimationFrame, tuning render-ahead buffers, and implementing strict change detection to avoid redundant UI renders. Ultimately, as designer Aaron Walter notes, shooting for merely usable is like a chef shooting for edible; developers must robustly engineer these complex interactions to deliver truly exceptional applications. **Keywords:** react long list performance, virtual scrolling implementation, dom re-rendering optimization, layout recalculation, frontend pagination strategies, windowing techniques, infinite scroll architecture, skeleton screen rendering, intersection observer api, requestanimationframe scrolling, dynamic list item height, frontend performance debugging, client-side change detection ## Chapters 1. **Performance considerations when rendering long lists natively** (00:00) — Painting thousands of DOM elements remains efficient until component re-renders bottleneck the main processing thread. 1. **Bottlenecks when re-rendering and fetching large data sets** (03:21) — Client-side frameworks struggle to compute target layouts after costly database queries and massive JSON serialization payloads. 1. **Practical design patterns for displaying large dataset results** (05:41) — Strategies combining server pagination and partial infinite scrolling mitigate the risks inherent to rendering endless components. 1. **Core concepts and mechanics behind virtual scrolling techniques** (09:45) — Windowing algorithms effectively map a smaller sliding viewport subset onto an artificially large document container. 1. **Evaluating open-source virtual scroll libraries versus custom implementations** (12:50) — Limitations surrounding strict DOM restoration states and variable block geometries consistently necessitate bespoke architectural solutions. 1. **Implementing custom virtual scrolling with mathematical layout calculations** (17:20) — Coordinating empty vertical footprints prevents rapid frame discarding across highly volatile list rendering operations. 1. **Optimizing scroll component performance through intelligent preloading strategies** (21:53) — Scaling object payload batches proportional to tracking velocity successfully projects the illusion of endless layouts. 1. **Lightweight rendering pipelines utilizing the browser intersection observer** (23:12) — Injecting native layout skeletons lets browser observers exchange dense nodes without forcing costly formula calculations. 1. **Optimization techniques for complex components and business logic** (26:16) — Executing redundant calculations outside synchronized event frames actively prevents JavaScript pipeline saturation and interface tearing. 1. **Deciding between server-side pagination and client-side virtual scrolling** (30:00) — Delegating initial dataset parsing logic upstream effectively limits bloated client-side dependencies before architectural migration requirements escalate. 1. **Evaluating element recycling capabilities inside modern frontend frameworks** (33:53) — Continuous change engine polling replaces the historic requirement for constructing external object pool memory managers. 1. **Applying windowing strategies to enterprise data tables and trees** (35:05) — Resolving deeply nested objects into flat recursive structures ensures uniform virtual rendering regardless of collapsable states. 1. **Preventing screen jitter utilizing native animation frame implementations** (38:08) — Offloading continuous position indexing exclusively behind native animation cycle gates smooths over unstable user interactions. ## Related Moments - [Optimizing long views with virtualized lists for smooth scrolling](https://www.wearedevelopers.com/videos/655-optimizing-your-app-for-success-tips-and-techniques-for-managing-slow-devices) (from "Optimizing Your App for Success: Tips and Techniques for managing slow devices") - [Accelerating DOM rendering with virtual scroll](https://www.wearedevelopers.com/videos/189-angular-angular-cdk-awesomeness-combined) (from "Angular <> Angular CDK - Awesomeness Combined") - [Optimizing long list rendering by implementing Lit virtualizer](https://www.wearedevelopers.com/videos/774-why-lit-is-fire) (from "Why LIT is Fire") - [Building declarative visual effects with scroll-driven animations](https://www.wearedevelopers.com/videos/956-what-s-new-and-what-s-next-in-web-ui) (from "What’s New and What’s Next in Web UI") - [Balancing user experience with developer-driven layout trends](https://www.wearedevelopers.com/videos/1340-wearedevelopers-live-performance-and-ai-social-media-decline-developer-events-and-more) (from "WeAreDevelopers LIVE - Performance and AI?, Social Media decline, Developer Events and more") - [Evaluating performance impacts of advanced CSS animations](https://www.wearedevelopers.com/videos/1806-nolojs-avoiding-javascript-cruft-with-html-and-css-aaron-t-grogg) (from "NoLoJS - Avoiding JavaScript Cruft with HTML and CSS - Aaron T. Grogg") ## Related Articles - [CSS-Only Scroll-Driven Animations](https://www.wearedevelopers.com/magazine/712-css-only-scroll-driven-animations) - [3 JavaScript-Free Techniques for Accordions, Dialogs, and Table of Contents](https://www.wearedevelopers.com/magazine/684-3-javascript-free-techniques-for-accordions-dialogs-and-table-of-contents) - [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front) - [The HTML Elements That You’re Probably Over-Engineering](https://www.wearedevelopers.com/magazine/646-the-html-elements-that-you-re-probably-over-engineering) ## Related Jobs - [Senior Software Engineer, React (Investing & Trading)](https://www.wearedevelopers.com/jobs/ext/1937625-senior-software-engineer-react-investing-trading) at **Bitpanda** - [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1377585-software-engineer) at **Bitpanda** - [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia** - [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group** - [Senior Software Engineer, React (Websites & Martech)](https://www.wearedevelopers.com/jobs/ext/1605272-senior-software-engineer-react-websites-martech) at **Bitpanda** - [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda**