Kompletter Leitfaden zum Infinite Scrolling in React

Infinite Scrolling ist ein UX-Muster, bei dem neue Inhalte geladen werden, während Benutzer auf einer Seite nach unten scrollen. Es ist üblich in sozialen Feeds, Timelines und News-Apps und bietet eine reibungslose Möglichkeit, große Datensätze zu erkunden, ohne Paginierungsschaltflächen zu verwenden. In diesem Leitfaden lernen Sie, wie Sie Infinite Scroll in React sowohl mit einer Drittanbieter-Bibliothek als auch mit einem benutzerdefinierten Hook implementieren können.

Was ist Infinite Scroll?

Infinite Scroll lädt neue Daten, wenn der Benutzer das Ende einer Liste erreicht. Es beseitigt die Notwendigkeit einer Paginierung und schafft ein kontinuierliches Browsing-Erlebnis. Sie finden es in Produkten wie Instagram, Twitter und Reddit.

Methode 1: Verwendung eines Pakets (react-infinite-scroll-component)

Der einfachste Weg, Infinite Scroll in React zu implementieren, ist mit einem gut getesteten Paket.

Schritt 1: Installation

npm install react-infinite-scroll-component

Schritt 2: Grundlegendes Anwendungsbeispiel

import InfiniteScroll from 'react-infinite-scroll-component';

function Feed() {
  const [items, setItems] = useState([]);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);

  const fetchMoreData = async () => {
    const res = await fetch(`/api/posts?page=${page}`);
    const newItems = await res.json();
    if (newItems.length === 0) setHasMore(false);
    else {
      setItems(prev => [...prev, ...newItems]);
      setPage(prev => prev + 1);
    }
  };

  return (
    <InfiniteScroll
      dataLength={items.length}
      next={fetchMoreData}
      hasMore={hasMore}
      loader={<h4>Loading...</h4>}
      endMessage={<p>No more results</p>}
    >
      {items.map(item => <div key={item.id}>{item.title}</div>)}
    </InfiniteScroll>
  );
}

Vorteile

• Schnell einzurichten
• Integrierte Lade- und Endzustände

Nachteile

• Weniger Kontrolle über die Scroll-Logik
• Fügt Paketabhängigkeit hinzu

Methode 2: Benutzerdefinierter Hook mit IntersectionObserver

Diese Methode gibt Ihnen volle Kontrolle und keine zusätzlichen Abhängigkeiten.

Schritt 1: Erstellen eines Hooks

function useInfiniteScroll(callback, ref) {
  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) callback();
    });
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, [callback, ref]);
}

Schritt 2: Verwendung in einer Komponente

function Feed() {
  const [items, setItems] = useState([]);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const sentinelRef = useRef(null);

  const loadMore = async () => {
    if (!hasMore) return;
    const res = await fetch(`/api/posts?page=${page}`);
    const newItems = await res.json();
    if (newItems.length === 0) setHasMore(false);
    else {
      setItems(prev => [...prev, ...newItems]);
      setPage(prev => prev + 1);
    }
  };

  useInfiniteScroll(loadMore, sentinelRef);

  return (
    <div>
      {items.map(item => <div key={item.id}>{item.title}</div>)}
      <div ref={sentinelRef} style={{ height: 1 }} />
    </div>
  );
}

Vorteile

• Vollständig anpassbar
• Funktioniert mit jeder Scroll-Logik oder API

Nachteile

• Erfordert mehr Einrichtung
• IntersectionObserver wird in IE11 nicht unterstützt

Praxisnahe Muster und Tipps

• Debounce von Fetch-Aufrufen, um APIs nicht zu überlasten
• Zeigen Sie einen Spinner oder Skeleton-Loader für bessere UX
• Fügen Sie Wiederholungslogik für Netzwerkfehler hinzu
• Behandeln Sie Randfälle wie Null-Ergebnisse oder leere Seiten

if (items.length === 0 && !hasMore) {
  return <p>No posts found.</p>;
}

Leistungsüberlegungen

• Verwenden Sie Bibliotheken wie react-window für die Virtualisierung beim Rendern von Tausenden von Elementen
• Memoizieren Sie Komponentenelemente, um Re-Renders zu vermeiden
• Bereinigen Sie Observer ordnungsgemäß, um Speicherlecks zu vermeiden

useEffect(() => {
  const observer = new IntersectionObserver(...);
  return () => observer.disconnect();
}, []);

Fazit

Infinite Scroll ist ein gängiges Feature in modernen UIs. Egal, ob Sie die Einfachheit eines Pakets oder die Kontrolle eines benutzerdefinierten Hooks bevorzugen, React macht beide Ansätze zugänglich. Berücksichtigen Sie bei der Implementierung von Infinite Scroll immer die Leistung und das Feedback beim Laden.

FAQs