2025-02-18
3733
#react
Ogundipe Samuel
1837
Feb 18, 2025 ⋅ 13 min read

3 ways to implement infinite scroll in React (with code examples)

Ogundipe Samuel Software engineer and technical writer.

Recent posts:

Let’s kill vibe coding and bring back prompt engineering

Explore the vibe coding hype cycle, the risks of casual “vibe-driven” development, and why prompt engineering deserves a comeback as a critical skill for building better, more reliable AI applications.

Oscar Jite-Orimiono
Sep 16, 2025 ⋅ 11 min read
Frontend Devs Aren't Lazy, They're Burnt Out

Frontend developers are burned out, not lazy

Shipping modern frontends is harder than it looks. Learn the hidden taxes of today’s stacks and practical ways to reduce churn and avoid burnout.

Shalitha Suranga
Sep 15, 2025 ⋅ 4 min read

Can native web APIs replace custom components in 2025?

Learn how native web APIs such as dialog, details, and Popover bring accessibility, performance, and simplicity without custom components.

Daniel Schwarz
Sep 12, 2025 ⋅ 9 min read
too many tools: How to manage frontend tool overload

Too many tools: How to manage frontend tool overload

Read about how the growth of frontend development created so many tools, and how to manage tool overload within your team.

Shalitha Suranga
Sep 11, 2025 ⋅ 12 min read
View all posts

2 Replies to "3 ways to implement infinite scroll in React (with code examples)"

  1. Hi,
    Thanks,

    I followed you & implemented the infinite scroll. I have been facing this issue.
    I have set page size 30, So for each API response I receive the 30 data. The problem is, when I open the application in big screen like TV/projector, Initial API call loads the 30 data & no scroll appear due to large screen. But I have 1000 data in Database.

    I told team, We could increase the initial page size 100, then they asked suppose after increased size What If the scroll doesn’t appear on window. More over, they want to keep page size 30 only, do not want to change.

    How to solve when I open the application in big screen, load the data until scroll appear?

  2. This error occured because you did not specify the context in which the infinite scroll should work. It defaults to the viewport if not set.

    The solution is that you pass in the root which is a selector to the options object as shown below.

    let options = {
    root: document.querySelector(“#scrollArea”),
    rootMargin: “0px”,
    threshold: 1.0,
    };

    let observer = new IntersectionObserver(callback, options);

Leave a Reply