javascript 45 lines · 6 steps

Building an infinite scroll hook in React

A custom hook that fetches pages on demand and triggers the next load when a sentinel element scrolls into view.

Explained by highlit

React Advanced custom-hooks intersection-observer pagination cleanup callback-ref

1import { useCallback, useEffect, useRef, useState } from 'react';
2 
3export function useInfiniteScroll(fetchPage) {
const [items, setItems] = useState([]);
const [page, setPage] = useState(1);
const [hasMore, setHasMore] = useState(true);
const [loading, setLoading] = useState(false);
const observer = useRef(null);
9 
useEffect(() => {
  let cancelled = false;
  setLoading(true);
  fetchPage(page)
    .then((batch) => {
      if (cancelled) return;
      setItems((prev) => [...prev, ...batch.items]);
      setHasMore(batch.hasMore);
    })
    .finally(() => {
      if (!cancelled) setLoading(false);
    });
  return () => {
    cancelled = true;
  };
}, [page, fetchPage]);
26 
const sentinelRef = useCallback(
  (node) => {
    if (loading) return;
    if (observer.current) observer.current.disconnect();
    observer.current = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting && hasMore) {
          setPage((prev) => prev + 1);
        }
      },
      { rootMargin: '200px' }
    );
    if (node) observer.current.observe(node);
  },
  [loading, hasMore]
);
43 
return { items, loading, hasMore, sentinelRef };
45}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1An IntersectionObserver lets you trigger loading lazily based on scroll position instead of wiring up scroll listeners.
2A cancelled flag in an effect cleanup guards against state updates from a stale or out-of-order fetch.
3A callback ref re-runs whenever the node or its dependencies change, making it ideal for attaching observers to dynamic elements.

Related explainers

javascript

'use server'
 
import { revalidatePath } from 'next/cache'
import { redirect } from 'next/navigation'

How a Next.js Server Action updates a post

server-actions authorization validation

Intermediate 7 steps

javascript

const express = require('express');
 
const v1 = express.Router();

Versioning an API with Express Routers

api versioning routing modularity

Intermediate 10 steps

python

import csv
import io
from datetime import datetime

Streaming a CSV export in Flask

streaming generators csv

Intermediate 9 steps

javascript

const RATE_LIMIT = 100;
const WINDOW_MS = 60 * 1000;
const BLOCK_MS = 5 * 60 * 1000;

Building a rate-limiting middleware in Express

rate-limiting middleware closures

Intermediate 9 steps

javascript

const transitions = {
  cart: { checkout: 'shipping' },
  shipping: { submitAddress: 'payment', back: 'cart' },
  payment: { submitPayment: 'review', back: 'shipping' },

A finite state machine for checkout flow

state-machine event-driven data-driven-design

Intermediate 7 steps

javascript

import { useState, useEffect, useCallback, useRef } from "react";
 
export function usePersistentForm(storageKey, initialValues) {
  const [values, setValues] = useState(() => {