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;
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
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>
);
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).
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]);
options Object
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
};
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
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
setListItems((prevItems) => [...prevItems, "https://picsum.photos/200"]);
observer.unobserve(entry.target);
}
});
}, options);
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
const lastCard = cardRefs.current[listItems.length - 1];
if (lastCard) {
observer.observe(lastCard);
}
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
return () => observer.disconnect();
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.
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.
So this is how we can implement infinite scrolling using Intersection Observer.
Hope this was helpful :)
Thank you.
Top comments (1)
Thanks for this insight, I will try it when I need it