Pagination and Infinite Scrolling

📚 Pagination vs Infinite Scrolling

When your React app needs to display large datasets, two popular UI patterns emerge: pagination and infinite scrolling. Both improve performance and user experience by loading data in chunks rather than all at once. 🚀📄

🧭 What is Pagination?

Pagination breaks data into separate pages. The user clicks a button or link to load more. It gives them a sense of progress and control.

📦 Example: Basic Pagination

import { useEffect, useState } from "react";

function PaginatedList() {
  const [page, setPage] = useState(1);
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    fetch(`https://api.example.com/products?page=${page}`)
      .then(res => res.json())
      .then(data => {
        setItems(data.items);
        setLoading(false);
      });
  }, [page]);

  return (
    <div>
      <ul>
        {items.map(item => (
          <li key={item.id}>📦 {item.name}</li>
        ))}
      </ul>
      <div className="space-x-2 mt-4">
        <button onClick={() => setPage(prev => prev - 1)} disabled={page === 1}>⬅ Prev</button>
        <button onClick={() => setPage(prev => prev + 1)}>Next âž¡</button>
      </div>
      {loading && <p>Loading...</p>}
    </div>
  );
}

✅ Pagination Pros

• 📏 Clear structure for users
• 🔍 Good for search results or admin dashboards
• 🔢 Easy to implement and SEO-friendly

⚠️ Pagination Cons

• 🚧 Can interrupt flow if too many clicks are needed
• 🧭 Requires page state management

🔁 What is Infinite Scrolling?

Infinite scrolling automatically loads more content as the user scrolls down. It creates a seamless, app-like experience — commonly used on social media and feeds.

🔃 Example: Infinite Scroll with Intersection Observer

import { useEffect, useRef, useState } from "react";

function InfiniteScrollList() {
  const [page, setPage] = useState(1);
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(false);
  const loader = useRef(null);

  useEffect(() => {
    const fetchItems = async () => {
      setLoading(true);
      const res = await fetch(`https://api.example.com/posts?page=${page}`);
      const data = await res.json();
      setItems(prev => [...prev, ...data.items]);
      setLoading(false);
    };

    fetchItems();
  }, [page]);

  useEffect(() => {
    const observer = new IntersectionObserver(
      entries => {
        if (entries[0].isIntersecting) {
          setPage(prev => prev + 1);
        }
      },
      { threshold: 1 }
    );

    if (loader.current) observer.observe(loader.current);

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

  return (
    <div>
      <ul>
        {items.map((item, i) => (
          <li key={i}>🧾 {item.title}</li>
        ))}
      </ul>
      {loading && <p>Loading more...</p>}
      <div ref={loader} />
    </div>
  );
}

✅ Infinite Scroll Pros

• 📱 Seamless and modern UX
• 📈 Great for mobile and feeds
• 🧠 Fewer clicks, more interaction

⚠️ Infinite Scroll Cons

• 🧭 Hard to track position/bookmark
• 🧪 Difficult to implement SEO and analytics
• 🚫 No natural stopping point or footer

📋 Which One Should You Use?

Use Case	Pagination	Infinite Scroll
Search Results	✅	⚠️
Product Catalog	✅	✅
Social Feeds	🚫	✅
Analytics/Reports	✅	🚫

🚀 Final Thoughts

Both pagination and infinite scrolling are effective strategies to optimize large data sets in React. The right choice depends on your app's content type, user interaction patterns, and performance needs. Build smart — show only what’s needed, when it’s needed! 🧠📦

---