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:

Designing For Instant Feedback- The Doherty Threshold In UX

Designing for instant feedback: The Doherty Threshold in UX

The Doherty Threshold suggests that when feedback occurs within this timeframe, users feel more in control and remain engaged.

Chidera Nwankwagu
Mar 26, 2025 ⋅ 4 min read
what is pair programming

What is pair programming – and should you try it?

Learn what pair programming is, its benefits, and how real-world implementation can improve your software development process.

Andrew Evans
Mar 26, 2025 ⋅ 6 min read
docker exec command

How to use docker exec to interact with running containers

Read up on how to interact with running containers using the docker exec command, and discover the difference between exec and attach.

Paul Akinyemi
Mar 25, 2025 ⋅ 4 min read
array filter method javascript

How to use the array filter() method in JavaScript

Learn about the array filter() method, from its basic syntax and use cases to more advanced techniques like chaining with map() and reduce().

Abiola Farounbi
Mar 24, 2025 ⋅ 5 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