Reactjs Tutorial : Infinite scrolling with Intersection Observer.-JS Tutorial-php.cn

What is infinite scrolling and need for it ?

Scrolling is a user action of moving a portion of content on webpage horizontally or vertically (in most of the cases).

Like as you will do while reading this article.

By Infinite it means you have new content automatically loads up as you scroll down the webpage.

Well alright , but why anyone should implement it ?

Discoverability

Lets imagine its a black Friday sale on your fav e-commerce store.

You found couple of products on the explore page but as you scroll to the bottom of webpage instead of more products you found a button which takes you to the next list of products.

You will be able to get to see the new products (but only in case if you notice that action button).

Infinite Scrolling just helps users find more content they might have missed otherwise.

Implementation

To implement infinite scrolling , we need to keep a check on if the user has reached the bottom of the page or the container.

But to detect the position of scroll is very expensive and its position values being unreliable due to different browser and devices.

So one way is to watch the last content (element) of the page and its intersection point with the viewport or a container.

How do we find the intersection point ?

Intersection Observer

Its a Web API which allows to observe the element at the end of the content or list.

When this element ("sentinel") becomes visible (intersects with the viewport , it triggers a callback function.

Through this function we can fetch more data and load it in the webpage.

This whole observation happens Asynchronously , which minimize the impact on main thread.

To implement Intersection Observer in Reactjs we will take an example of Social feed , where we will do infinite scrolling on post listing.

Take a look at this component and you can follow the breakdown of each bits and pieces just below this.

import { useEffect, useRef, useState } from "react";

interface IIntersectionObserverProps {}

const allItems = [
  "https://picsum.photos/200",
  "https://picsum.photos/200",
  "https://picsum.photos/200",
  "https://picsum.photos/200",
];

const IntersectionObserverImplement: React.FunctionComponent<
  IIntersectionObserverProps
> = (props) => {
  const cardRefs = useRef<(HTMLDivElement | null)[]>([]); // Initialize as an empty array
  const containerRef = useRef<HTMLDivElement | null>(null);
  const [listItems, setListItems] = useState(allItems);

  useEffect(() => {
    const options = {
      root: containerRef.current,
      rootMargin: "0px",
      threshold: 0.5,
    };
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setListItems((prevItems) => [
            ...prevItems,
            "https://picsum.photos/200",
          ]);
          observer.unobserve(entry.target); // Stop observing the current element
        }
      });
    }, options);

    // Observe the last card only
    const lastCard = cardRefs.current[listItems.length - 1];

    if (lastCard) {
      observer.observe(lastCard);
    }

    return () => observer.disconnect(); // Clean up observer on unmount
  }, [listItems]);

  return (
    <div className="container" ref={containerRef}>
      {listItems.map((eachItem, index) => (
        <div
          className="card"
          ref={(el) => (cardRefs.current[index] = el)} // Assign refs correctly
          key={index}
        >
          <h5>Post {index}</h5>
          <img width={"200"} height={"150"} src={eachItem} />
        </div>
      ))}
    </div>
  );
};

export default IntersectionObserverImplement;

Copy after login

The goal is to detect when the last post in the feed list (called the sentinel) intersects with the viewport. Once this happens, more post is loaded and displayed.

a. Initializing State and Refs

const cardRefs = useRef<(HTMLDivElement | null)[]>([]); // For storing references to each card
const containerRef = useRef<HTMLDivElement | null>(null); // Reference to the scrollable container
const [listItems, setListItems] = useState(allItems); // State to hold the list of items

Copy after login

cardRefs An array to keep track of the DOM elements representing cards in the list.

containerRef Refers to the scrollable container.

listItems Holds the array of currently visible items on the page.

b. Rendering the List and Assigning Refs

return (
  <div className="container" ref={containerRef}>
    {listItems.map((eachItem, index) => (
      <div
        className="card"
        ref={(el) => (cardRefs.current[index] = el)} // Assign a ref to each card
        key={index}
      >
        <h5>Post {index}</h5>
        <img width={"200"} height={"150"} src={eachItem} />
      </div>
    ))}
  </div>
);

Copy after login

containerRef Marks the container where scrolling will happen.

cardRefs Assigns each card in the list a reference. This ensures we can tell the observer which element to monitor (e.g., the last card).

Maps over listItems to render each item in the list.
Each div is styled as a card and has a unique key for React.

c. Observing the last post (item).

import { useEffect, useRef, useState } from "react";

interface IIntersectionObserverProps {}

const allItems = [
  "https://picsum.photos/200",
  "https://picsum.photos/200",
  "https://picsum.photos/200",
  "https://picsum.photos/200",
];

const IntersectionObserverImplement: React.FunctionComponent<
  IIntersectionObserverProps
> = (props) => {
  const cardRefs = useRef<(HTMLDivElement | null)[]>([]); // Initialize as an empty array
  const containerRef = useRef<HTMLDivElement | null>(null);
  const [listItems, setListItems] = useState(allItems);

  useEffect(() => {
    const options = {
      root: containerRef.current,
      rootMargin: "0px",
      threshold: 0.5,
    };
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setListItems((prevItems) => [
            ...prevItems,
            "https://picsum.photos/200",
          ]);
          observer.unobserve(entry.target); // Stop observing the current element
        }
      });
    }, options);

    // Observe the last card only
    const lastCard = cardRefs.current[listItems.length - 1];

    if (lastCard) {
      observer.observe(lastCard);
    }

    return () => observer.disconnect(); // Clean up observer on unmount
  }, [listItems]);

  return (
    <div className="container" ref={containerRef}>
      {listItems.map((eachItem, index) => (
        <div
          className="card"
          ref={(el) => (cardRefs.current[index] = el)} // Assign refs correctly
          key={index}
        >
          <h5>Post {index}</h5>
          <img width={"200"} height={"150"} src={eachItem} />
        </div>
      ))}
    </div>
  );
};

export default IntersectionObserverImplement;

Copy after login

options Object

const cardRefs = useRef<(HTMLDivElement | null)[]>([]); // For storing references to each card
const containerRef = useRef<HTMLDivElement | null>(null); // Reference to the scrollable container
const [listItems, setListItems] = useState(allItems); // State to hold the list of items

Copy after login

root This specifies the scrolling container.

containerRef.current refers to the div wrapping all the cards.
If root is null, it observes the viewport by default.

rootMargin: Defines extra margin around the root.

"0px" means no extra space. You could use values like "100px" to trigger the observer earlier (e.g., when the element is close to appearing).

threshold: Determines how much of the target element must be visible for the observer to trigger.

0.5 means the callback will trigger when 50% of the last card is visible.

Creating the Observer

return (
  <div className="container" ref={containerRef}>
    {listItems.map((eachItem, index) => (
      <div
        className="card"
        ref={(el) => (cardRefs.current[index] = el)} // Assign a ref to each card
        key={index}
      >
        <h5>Post {index}</h5>
        <img width={"200"} height={"150"} src={eachItem} />
      </div>
    ))}
  </div>
);

Copy after login

IntersectionObserver Accepts a callback function and the options object defined earlier.

The callback runs whenever an observed element meets the conditions specified in options.

The entries parameter is an array of observed elements. Each entry contains information about whether the element is intersecting (visible).

If entry.isIntersecting is true, it means the last card is now visible:

Add a new item to the list using setListItems.
Unobserve the current element (entry.target) to prevent redundant triggers.

Observing the Last Card

 useEffect(() => {
    const options = {
      root: containerRef.current,
      rootMargin: "0px",
      threshold: 0.5,
    };
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setListItems((prevItems) => [
            ...prevItems,
            "https://picsum.photos/200",
          ]);
          observer.unobserve(entry.target); // Stop observing the current element
        }
      });
    }, options);

    // Observe each card
    const lastCard = cardRefs.current[listItems.length - 1];

    if (lastCard) {
      observer.observe(lastCard);
    }

    return () => observer.disconnect(); // Clean up observer on unmount
  }, [listItems]);

Copy after login

cardRefs.current: Tracks references to all cards.

listItems.length - 1: Identifies the last item in the list.

If a lastCard exists, start observing it using observer.observe(lastCard).

The observer will monitor this card and trigger the callback when it becomes visible.

Cleaning Up

const options = {
  root: containerRef.current, // Observe within the container
  rootMargin: "0px",         // No margin around the root container
  threshold: 0.5,           // Trigger when 50% of the element is visible
};

Copy after login

observer.disconnect() removes all observers created by this useEffect.

This ensures that when the component unmounts or re-renders, the old observers are cleaned up.

Reactjs Tutorial : Infinite scrolling with Intersection Observer.

What Happens at Each Stage?

1. User Scrolls

As the user scrolls , the last card comes into the view

2. Intersection Observer Triggers

When 50% of the last card is visible, the observer’s callback
runs.

3. Add Items

The callback adds new items to the list (setListItems).

4. Repeat

The observer disconnects from the old last card and attaches to
the new last card.

Reactjs Tutorial : Infinite scrolling with Intersection Observer.

So this is how we can implement infinite scrolling using Intersection Observer.

Hope this was helpful :)

Thank you.

The above is the detailed content of Reactjs Tutorial : Infinite scrolling with Intersection Observer.. For more information, please follow other related articles on the PHP Chinese website!