How can I implement infinite scroll in my React application?

How can I implement infinite scroll in my React application?

You can implement infinite scroll in React by using the Intersection Observer API or by listening to scroll events.

Can you provide a code example for using Intersection Observer?

Sure! Here's a simple example:

import React, { useEffect, useRef, useState } from 'react';

const InfiniteScroll = () => {
    const [items, setItems] = useState([]);
    const [loading, setLoading] = useState(false);
    const observer = useRef();

    const lastItemRef = useRef();

    const loadMoreItems = () => {
        setLoading(true);
        // Fetch more items here
        setTimeout(() => {
            setItems(prev => [...prev, ...Array.from({ length: 20 }, (_, i) => `Item ${prev.length + i + 1}`)]);
            setLoading(false);
        }, 1000);
    };

    useEffect(() => {
        if (loading) return;
        const observerCallback = (entries) => {
            if (entries[0].isIntersecting) {
                loadMoreItems();
            }
        };

        observer.current = new IntersectionObserver(observerCallback);
        if (lastItemRef.current) {
            observer.current.observe(lastItemRef.current);
        }

        return () => {
            if (lastItemRef.current) {
                observer.current.unobserve(lastItemRef.current);
            }
        };
    }, [loading]);

    return (
        <div>
            {items.map((item, index) => (
                <div key={index} ref={index === items.length - 1 ? lastItemRef : null}>{item}</div>
            ))}
            {loading && <p>Loading...</p>}
        </div>
    );
};

export default InfiniteScroll;

What if I want to implement it with a library?

You can use libraries like react-infinite-scroll-component or react-infinite-scroller for easier implementation. They handle a lot of the boilerplate for you.