React IntersectionObserver ile Performanslı Infinite Scroll Hook’u

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

/**
 * Sayfa sonuna gelindiğinde belirtilen callback fonksiyonunu çalıştıran Custom Hook.
 */
export function useInfiniteScroll(fetchMoreCallback, hasMore) {
    const [isFetching, setIsFetching] = useState(false);
    const observer = useRef();

    const lastElementRef = useCallback(node => {
        if (isFetching) return;
        if (observer.current) observer.current.disconnect();

        observer.current = new IntersectionObserver(entries => {
            if (entries[0].isIntersecting && hasMore) {
                setIsFetching(true);
            }
        });

        if (node) observer.current.observe(node);
    }, [isFetching, hasMore]);

    useEffect(() => {
        if (!isFetching) return;

        const fetchData = async () => {
            await fetchMoreCallback();
            setIsFetching(false);
        };

        fetchData();
    }, [isFetching, fetchMoreCallback]);

    return { lastElementRef, isFetching };
}

// Örnek Kullanım:
// const { lastElementRef, isFetching } = useInfiniteScroll(loadMoreProducts, hasMoreProducts);
// <div ref={lastElementRef}>{isFetching ? 'Yükleniyor...' : ''}</div>