Learn how to implement infinite scroll in React using the Intersection Observer API for efficient dynamic content loading.

Tobiloba Adedeji

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Infinite Scroll is a web design technique that allows users to scroll through content continuously without pagination or clicking "Next" buttons. In this guide, we'll implement infinite scrolling by building a card-based planet explorer. We'll explore the potential performance issues infinite scrolling can present and reveal optimization strategies to mitigate them.

Infinite Scroll in React: Complete Guide for Dynamic Loading

Implementing Infinite Scroll using Intersection Observer

For the next version of the living dexes in <a href="http://supereffective.gg" target="_blank" rel="noopener nofollow">supereffective.gg</a> (open source Pokedex tracker) I need to use a lot of these techniques, specially for the Home boxes which can have up to 6000 Pokemon / DOM elements distributed in 200 boxes (30 each).
What I am doing in this case is using the Intersection Observer on each box, and when it’s not rendered I tell to not add the children, just a placeholder. This way it only contains 1 child instead of 30.
I also have to give it a min-height when it’s off-canvas, so the scroll doesn’t jump.
Other optimizations to consider: I also tell the browser to unload from the CPU what’s not on-screen using CSS’s “content-visibility: auto” + lazy loading of images (loading=“lazy”) + DOM Event Delegation from parent to children.
This is the only way to make an efficient pseudo-virtual scroll without sacrificing the power of CSS and CSS flexbox / grids.
Right now all the Virtual Scrolling libraries use absolute positioning for the elements, which is very intrusive IMHO.
I hope that soon we will see better Web APIs to do Virtual Scrolling natively, but it seems we are still in the early years, sadly.