javascript 60 lines · 9 steps

Debounced search with cancellation in React

A custom hook delays input updates while AbortController cancels stale fetches, keeping search snappy and consistent.

Explained by highlit

React Intermediate custom-hooks debounce abortcontroller effect-cleanup data-fetching

1import { useState, useEffect, useMemo } from 'react';
2 
3function useDebounce(value, delay = 300) {
const [debounced, setDebounced] = useState(value);
5 
useEffect(() => {
  const timer = setTimeout(() => setDebounced(value), delay);
  return () => clearTimeout(timer);
}, [value, delay]);
10 
return debounced;
12}
13 
14export function SearchBox({ onResults }) {
const [query, setQuery] = useState('');
const debouncedQuery = useDebounce(query, 400);
const [results, setResults] = useState([]);
const [loading, setLoading] = useState(false);
19 
useEffect(() => {
  const term = debouncedQuery.trim();
  if (!term) {
    setResults([]);
    return;
  }
26 
  const controller = new AbortController();
  setLoading(true);
29 
  fetch(`/api/search?q=${encodeURIComponent(term)}`, { signal: controller.signal })
    .then((res) => res.json())
    .then((data) => {
      setResults(data.items);
      onResults?.(data.items);
    })
    .catch((err) => {
      if (err.name !== 'AbortError') console.error(err);
    })
    .finally(() => setLoading(false));
40 
  return () => controller.abort();
}, [debouncedQuery, onResults]);
43 
return (
  <div className="search-box">
    <input
      type="search"
      value={query}
      placeholder="Search products…"
      onChange={(e) => setQuery(e.target.value)}
    />
    {loading && <span className="spinner" aria-hidden />}
    <ul>
      {results.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  </div>
);
60}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Debouncing input prevents firing a request on every keystroke, cutting wasted network calls.
2Returning a cleanup function from useEffect cancels in-flight work before the next effect runs.
3AbortController plus an AbortError check avoids race conditions and noise from cancelled requests.

Related explainers

javascript

const ROLE_PERMISSIONS = {
  admin: ['users:read', 'users:write', 'billing:read', 'billing:write'],
  manager: ['users:read', 'billing:read'],
  member: ['users:read'],

Role-based permissions middleware in Express

authorization middleware rbac

Intermediate 9 steps

javascript

function attachThousandSeparators(input, { locale = 'en-US' } = {}) {
  const formatter = new Intl.NumberFormat(locale);
  const groupSep = formatter.format(11111).replace(/\d/g, '')[0] || ',';
  const decimalSep = formatter.format(1.1).replace(/\d/g, '')[0] || '.';

Live thousand separators without losing the caret

dom intl caret-preservation

Advanced 8 steps

javascript

import { useReducer, useEffect } from "react";
 
const initialState = { status: "idle", data: null, error: null };

Building a data-fetching hook in React

custom-hooks usereducer data-fetching

Intermediate 9 steps

javascript

const express = require('express');
const app = express();
 
app.get('/health', (req, res) => res.json({ status: 'ok' }));

Graceful shutdown in an Express server

graceful-shutdown signal-handling connection-tracking

Advanced 9 steps

javascript

import { useState, useEffect, useCallback } from 'react';
 
function getColumnCount(width) {
  if (width < 640) return 1;

A responsive column hook in React

custom-hooks debouncing responsive-design

Intermediate 7 steps

javascript

function initCharacterCounter(textarea, options = {}) {
  const maxLength = options.maxLength ?? 280;
  const warnThreshold = options.warnThreshold ?? 0.9;