Build an infinite scroll component in React using Intersection Observer that loads more items as the user scrolls, with loading states and race condition handling.

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

function useInfiniteScroll(fetchPage) {
  const [items, setItems] = useState([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const loadingRef = useRef(false);
  const observerRef = useRef(null);

  // Fetch data when page changes
  useEffect(() => {
    const controller = new AbortController();
    let cancelled = false;

    async function load() {
      if (loadingRef.current || !hasMore) return;
      loadingRef.current = true;
      setLoading(true);

      try {
        const newItems = await fetchPage(page, controller.signal);
        if (!cancelled) {
          setItems(prev => [...prev, ...newItems]);
          if (newItems.length === 0) setHasMore(false);
        }
      } catch (err) {
        if (err.name !== 'AbortError') console.error(err);
      } finally {
        if (!cancelled) {
          setLoading(false);
          loadingRef.current = false;
        }
      }
    }

    load();
    return () => { cancelled = true; controller.abort(); };
  }, [page, fetchPage, hasMore]);

  // Sentinel ref callback for Intersection Observer
  const sentinelRef = useCallback((node) => {
    if (observerRef.current) observerRef.current.disconnect();
    if (!node) return;

    observerRef.current = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting && !loadingRef.current) {
          setPage(p => p + 1);
        }
      },
      { rootMargin: '200px' }
    );
    observerRef.current.observe(node);
  }, []);

  return { items, loading, hasMore, sentinelRef };
}

// Usage: Product listing with infinite scroll
const fetchProducts = async (page, signal) => {
  const res = await fetch(`/api/products?page=${page}&limit=20`, { signal });
  const data = await res.json();
  return data.products; // Returns [] when no more
};

function ProductList() {
  const { items, loading, hasMore, sentinelRef } = useInfiniteScroll(fetchProducts);

  return (
    <div>
      <h1>Products</h1>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))', gap: 16 }}>
        {items.map(product => (
          <div key={product.id} style={{ border: '1px solid #ddd', padding: 16, borderRadius: 8 }}>
            <img src={product.image} alt={product.name} loading="lazy"
                 style={{ width: '100%', height: 200, objectFit: 'cover' }} />
            <h3>{product.name}</h3>
            <p>${product.price}</p>
          </div>
        ))}
      </div>

      {/* Sentinel element — triggers next page load */}
      {hasMore && <div ref={sentinelRef} style={{ height: 1 }} />}

      {loading && <p style={{ textAlign: 'center', padding: 16 }}>Loading more...</p>}
      {!hasMore && items.length > 0 && (
        <p style={{ textAlign: 'center', padding: 16, color: '#888' }}>
          You've reached the end
        </p>
      )}
    </div>
  );
}