Infinite Loading with useEffect

How to append data to a list when the user scrolls to the bottom (Load More pattern).

The Logic

Fetch initial data (Page 1).
Listen for scroll event or intersection observer.
Fetch next page.
Append new data to existing array setData([...old, ...new]).

The Code

      
typescript

import { useState, useEffect } from 'react';

function InfiniteList() {
  const [items, setItems] = useState<string[]>([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);

  const loadMore = async () => {
    setLoading(true);
    const newItems = await fetchAPI(page); // Mock API
    
    // Functional update to ensure we don't lose previous items
    setItems(prev => [...prev, ...newItems]);
    setLoading(false);
  };

  useEffect(() => {
    loadMore();
  }, [page]); // Trigger when page changes

  return (
    <div>
      {items.map(item => <div key={item}>{item}</div>)}
      
      <button 
        onClick={() => setPage(p => p + 1)} 
        disabled={loading}
      >
        {loading ? 'Loading...' : 'Load More'}
      </button>
    </div>
  );
}