2023-04-14
1334
#react
Ogundipe Samuel
1837
Apr 14, 2023 ⋅ 4 min read

3 ways to implement infinite scroll in React

Ogundipe Samuel Software engineer and technical writer.

Recent posts:

Justin Kitagawa Leader Spotlight

Leader Spotlight: Riding the rocket ship of scale, with Justin Kitagawa

We sit down with Justin Kitagawa to learn more about his leadership style and approach for handling the complexities that come with scaling fast.

Jessica Srinivas
Mar 29, 2024 ⋅ 8 min read
Nx Adoption Guide: Overview, Examples, And Alternatives

Nx adoption guide: Overview, examples, and alternatives

Let’s explore Nx features, use cases, alternatives, and more to help you assess whether it’s the right tool for your needs.

Andrew Evans
Mar 28, 2024 ⋅ 9 min read
Understanding Security In React Native Applications

Understanding security in React Native applications

Explore the various security threats facing React Native mobile applications and how to mitigate them.

Wisdom Ekpotu
Mar 27, 2024 ⋅ 10 min read
Warp Adoption Guide: Overview, Examples, And Alternatives

warp adoption guide: Overview, examples, and alternatives

The warp web framework for Rust offers many enticing features. Let’s see when and why you should consider using warp in your projects.

Ukeje Goodness
Mar 26, 2024 ⋅ 8 min read
View all posts

2 Replies to "3 ways to implement infinite scroll in React"

  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