Listen to scroll events and detect when more content is loaded, triggering loading by determining whether the user is close to the page or the bottom of the container; 2. Optionally bind scrolling listening to a specific container instead of a window; 3. Use throttling or Intersection Observer to optimize performance, and it is recommended to use Intersection Observer to improve efficiency; 4. Handle boundary situations such as multiple loads, errors and accessibility; ultimately implement smooth and efficient unlimited scrolling functions to improve user experience.

Implementing infinite scrolling in React is a great way to improve user experience by loading content dynamically as the user scrolls, instead of requiring pagination. Here's how to do it effectively and efficiently.

1. Listen to Scroll Events and Detect When to Load More

The core idea behind infinite scrolling is to detect when the user has scrolled near the bottom of the page (or container), then trigger a function to load more data.

You can achieve this by:

• Listening to the scroll event on the window or a scrollable container.
• Checking if the user is close to the bottom using scroll and client heights.

 import { useEffect, useState } from 'react';

function InfiniteScroll() {
  const [items, setItems] = useState([]);
  const [hasMore, setHasMore] = useState(true);
  const [loading, setLoading] = useState(false);

  const loadMoreItems = async () => {
    if (loading || !hasMore) return;
    setLoading(true);

    // Simulate API call
    setTimeout(() => {
      const newItems = Array.from({ length: 10 }, (_, i) => `Item ${items.length i 1}`);
      setItems(prev => [...prev, ...newItems]);
      if (items.length >= 50) setHasMore(false); // Stop after 50 items
      setLoading(false);
    }, 500);
  };

  useEffect(() => {
    const handleScroll = () => {
      if (
        window.innerHeight document.documentElement.scrollTop
        >= document.documentElement.offsetHeight - 500 // Trigger 500px before bottom
      ) {
        loadMoreItems();
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [loading, hasMore]);

  useEffect(() => {
    loadMoreItems(); // Load initial items
  }, []);

  Return (
    <div>
      {items.map((item, index) => (
        <div key={index} style={{ padding: &#39;20px&#39;, borderBottom: &#39;1px solid #eee&#39; }}>
          {item}
        </div>
      ))}
      {loading && <p style={{ textAlign: &#39;center&#39; }}>Loading more...</p>}
      {!hasMore && <p style={{ textAlign: &#39;center&#39; }}>No more items to load.</p>}
    </div>
  );
}

export default InfiniteScroll;

? Note: The threshold ( 500px in this case) ensures content loads before the user hits the very bottom — this prevents a jarring wait.

2. Use a Scrollable Container (Optional)

If your app doesn't scroll the whole page (eg, a chat window or sidebar), attach the scroll listener to a specific container instead of window .

 const containerRef = useRef();

useEffect(() => {
  const container = containerRef.current;
  const handleScroll = () => {
    if (
      container.scrollTop container.clientHeight >= container.scrollHeight - 100
    ) {
      loadMoreItems();
    }
  };

  container.addEventListener('scroll', handleScroll);
  return () => container.removeEventListener('scroll', handleScroll);
}, []);

And in your JSX:

 <div ref={containerRef} style={{ height: &#39;500px&#39;, overflowY: &#39;scroll&#39; }}>
  {/* List items */}
</div>

3. Optimize Performance with Throttling or Intersection Observer

Listening to every scroll event can cause performance issues. Two better approaches:

? Option A: Throttle Scroll Events

Use a debounce/throttle utility (eg, Lodash or custom):

 const throttle = (func, delay) => {
  let inThrottle;
  return () => {
    if (!inThrottle) {
      func();
      inThrottle = true;
      setTimeout(() => (inThrottle = false), delay);
    }
  };
};

// Then use: throttle(handleScroll, 100)

? Option B: Use IntersectionObserver (Recommended)

This is more efficient and modern. Create a sentinel (invisible) element at the end of the list and observe it.

 const observer = useRef();

useEffect(() => {
  observer.current = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting && hasMore && !loading) {
      loadMoreItems();
    }
  });

  if (observer.current && sentinelRef.current) {
    observer.current.observe(sentinelRef.current);
  }

  return () => {
    if (sentinelRef.current) observe.current.unobserve(sentinelRef.current);
  };
}, [hasMore, loading]);

const sentinelRef = useRef();

// In your JSX:
<div ref={sentinelRef} style={{ height: &#39;10px&#39; }} />

This method is performant and clean , as it avoids scroll event listeners altogether.

4. Handle Edge Cases

• Avoid multiple simultaneous loads: Use loading state to prevent duplicate API calls.
• Error handling: Add a retry mechanism or error UI.
• Accessibility: Announce new content to screen readers using ARIA live regions.
• Server-side support: Your backend should support offset/limit or cursor-based pagination.

Summary

To implement infinite scrolling in React:

• Track scroll position or use IntersectionObserver .
• Load more data when near the bottom.
• Prevent duplicate loads with loading and hasMore states.
• Optimize with IntersectionObserver for better performance.

Using the IntersectionObserver approach is generally preferred in modern apps — it's efficient, clean, and scalable.

Basically, infinite scrolling isn't hard to set up, but doing it right means paying attention to UX and performance.

The above is the detailed content of How to Implement Infinite Scrolling in React. For more information, please follow other related articles on the PHP Chinese website!