useDebounce — Delay value updates or callback execution until input settles

import { useState, useEffect, useRef, useCallback, useMemo } from "react";
 
/**
 * useDebouncedValue
 * Returns a debounced copy of `value` that only updates
 * after `delay` ms of inactivity.
 */
function useDebouncedValue<T>(value: T, delay: number): T {
  const [debounced, setDebounced] = useState(value);
 
  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id);
  }, [value, delay]);
 
  return debounced;
}
 
/**
 * useDebouncedCallback
 * Returns a stable, debounced version of `callback`.
 * Supports leading-edge invocation via `options.leading`.
 */
function useDebouncedCallback<T extends (...args: any[]) => void>(
  callback: T,
  delay: number,
  options: { leading?: boolean } = {}
): T & { cancel: () => void; flush: () => void } {
  const { leading = false } = options;
  const callbackRef = useRef(callback);
  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const lastArgsRef = useRef<Parameters<T> | null>(null);
  const leadingFiredRef = useRef(false);
 
  // Always keep the latest callback
  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);
 
  // Cleanup on unmount
  useEffect(() => {
    return () => {
      if (timerRef.current) clearTimeout(timerRef.current);
    };
  }, []);
 
  const cancel = useCallback(() => {
    if (timerRef.current) clearTimeout(timerRef.current);
    timerRef.current = null;
    lastArgsRef.current = null;
    leadingFiredRef.current = false;
  }, []);
 
  const flush = useCallback(() => {
    if (lastArgsRef.current) {
      callbackRef.current(...lastArgsRef.current);
    }
    cancel();
  }, [cancel]);
 
  const debounced = useCallback(
    (...args: Parameters<T>) => {
      lastArgsRef.current = args;
 
      if (leading && !leadingFiredRef.current) {
        leadingFiredRef.current = true;
        callbackRef.current(...args);
      }
 
      if (timerRef.current) clearTimeout(timerRef.current);
 
      timerRef.current = setTimeout(() => {
        if (!leading) {
          callbackRef.current(...args);
        }
        leadingFiredRef.current = false;
        timerRef.current = null;
        lastArgsRef.current = null;
      }, delay);
    },
    [delay, leading]
  ) as T & { cancel: () => void; flush: () => void };
 
  debounced.cancel = cancel;
  debounced.flush = flush;
 
  return debounced;
}

"use client";
 
import { useState } from "react";
 
function SearchInput() {
  const [query, setQuery] = useState("");
  const debouncedQuery = useDebouncedValue(query, 300);
 
  // Only fires network request when debouncedQuery changes
  useEffect(() => {
    if (!debouncedQuery) return;
    fetch(`/api/search?q=${encodeURIComponent(debouncedQuery)}`)
      .then((res) => res.json())
      .then((data) => console.log(data));
  }, [debouncedQuery]);
 
  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Search..."
    />
  );
}
 
function SaveButton() {
  const debouncedSave = useDebouncedCallback(
    (content: string) => {
      fetch("/api/save", {
        method: "POST",
        body: JSON.stringify({ content }),
      });
    },
    1000,
    { leading: true }
  );
 
  return (
    <button onClick={() => debouncedSave("draft content")}>
      Save (debounced)
    </button>
  );
}

// Fire on both leading and trailing edge
function useDebouncedCallback(callback, delay, { leading: true, trailing: true })

// Production example: Debounce pattern integrated with SWR
// File: src/hooks/use-search.ts
import { useState, useEffect, useMemo } from 'react';
import useSWR from 'swr';
 
const fetcher = (url: string) => fetch(url).then((r) => r.json());
 
export function useSearch(query: string, platform: string) {
  const [debouncedQuery, setDebouncedQuery] = useState(query);
 
  // Debounce: only update the query after 300ms of inactivity
  useEffect(() => {
    const timer = setTimeout(() => setDebouncedQuery(query), 300);
    return () => clearTimeout(timer);
  }, [query]);
 
  const shouldFetch = debouncedQuery.length >= 3;
  const apiUrl = shouldFetch
    ? `/api/search?q=${encodeURIComponent(debouncedQuery)}&platform=${platform}`
    : null;
 
  const { data, isLoading, isValidating } = useSWR(apiUrl, fetcher, {
    keepPreviousData: true,
  });
 
  return useMemo(() => ({
    results: data?.results ?? [],
    isLoading: isLoading || (shouldFetch && isValidating),
  }), [data, isLoading, shouldFetch, isValidating]);
}