javascript 50 lines · 8 steps

Building a throttle hook in React

A custom useThrottle hook caps how often a callback fires, then drives a scroll progress bar with it.

Explained by highlit

React Intermediate throttling custom-hooks refs event-listeners performance

1import { useRef, useCallback, useEffect, useState } from "react";
2 
3function useThrottle(callback, delay) {
const lastRun = useRef(0);
const timeout = useRef(null);
6 
return useCallback(
  (...args) => {
    const now = Date.now();
    const remaining = delay - (now - lastRun.current);
11 
    if (remaining <= 0) {
      if (timeout.current) {
        clearTimeout(timeout.current);
        timeout.current = null;
      }
      lastRun.current = now;
      callback(...args);
    } else if (!timeout.current) {
      timeout.current = setTimeout(() => {
        lastRun.current = Date.now();
        timeout.current = null;
        callback(...args);
      }, remaining);
    }
  },
  [callback, delay]
);
29}
30 
31export function ScrollProgressBar() {
const [progress, setProgress] = useState(0);
33 
const handleScroll = useThrottle(() => {
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
  const scrollable = scrollHeight - clientHeight;
  setProgress(scrollable > 0 ? (scrollTop / scrollable) * 100 : 0);
}, 100);
39 
useEffect(() => {
  window.addEventListener("scroll", handleScroll, { passive: true });
  return () => window.removeEventListener("scroll", handleScroll);
}, [handleScroll]);
44 
return (
  <div className="progress-track">
    <div className="progress-fill" style={{ width: `${progress}%` }} />
  </div>
);
50}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Storing timing state in refs keeps values across renders without triggering re-renders.
2Throttling with both a leading call and a trailing timeout guarantees the final event isn't dropped.
3Memoizing the returned handler lets effects add and remove the exact same listener reliably.

Related explainers

javascript

import { Suspense } from 'react';
import { searchProducts } from '@/lib/products';
import SearchInput from './search-input';

Streaming search results in a Next.js Server Component

server-components suspense streaming

Intermediate 8 steps

javascript

import { useState } from 'react';
 
function StarRating({ value = 0, max = 5, onChange, size = 24 }) {
  const [hovered, setHovered] = useState(null);

Building an accessible star rating in React

controlled-component accessibility state-management

Intermediate 8 steps

javascript

import { notFound } from 'next/navigation'
import { Suspense } from 'react'
import { getPostBySlug, getRelatedPosts } from '@/lib/posts'
import { RelatedPosts } from '@/components/related-posts'

Building a dynamic blog post page in Next.js

server-components dynamic-routing metadata

Intermediate 8 steps

javascript

const express = require('express');
const { createProxyMiddleware, fixRequestBody } = require('http-proxy-middleware');
 
const router = express.Router();

Building an API gateway proxy in Express

reverse-proxy middleware api-gateway

Intermediate 6 steps

javascript

import { useCallback, useRef, useState } from 'react';
 
export function ColorPicker({ initialColor = '#3b82f6', onCommit }) {
  const [committed, setCommitted] = useState(initialColor);

A validated color picker in React

uncontrolled-inputs refs validation

Intermediate 7 steps

javascript

import { useEffect, useRef } from 'react';
 
export function useRefetchOnFocus(refetch, { staleTime = 30_000 } = {}) {
  const lastFetchedAt = useRef(Date.now());