typescript 52 lines · 7 steps

A debounced autocomplete hook in React

A custom hook that debounces input, cancels stale requests, and returns typed suggestions.

Explained by highlit

React Advanced debounce custom-hooks abortcontroller race-conditions async

1import { useState, useEffect, useRef, useCallback } from "react";
2 
3interface Suggestion {
id: string;
label: string;
6}
7 
8export function useAutocomplete(minLength = 2, delay = 300) {
const [query, setQuery] = useState("");
const [suggestions, setSuggestions] = useState<Suggestion[]>([]);
const [loading, setLoading] = useState(false);
const abortRef = useRef<AbortController | null>(null);
13 
useEffect(() => {
  const trimmed = query.trim();
  if (trimmed.length < minLength) {
    setSuggestions([]);
    setLoading(false);
    return;
  }
21 
  const handle = setTimeout(async () => {
    abortRef.current?.abort();
    const controller = new AbortController();
    abortRef.current = controller;
    setLoading(true);
27 
    try {
      const res = await fetch(
        `/api/suggestions?q=${encodeURIComponent(trimmed)}`,
        { signal: controller.signal },
      );
      if (!res.ok) throw new Error(`Request failed: ${res.status}`);
      const data: Suggestion[] = await res.json();
      setSuggestions(data);
    } catch (err) {
      if ((err as Error).name !== "AbortError") setSuggestions([]);
    } finally {
      if (abortRef.current === controller) setLoading(false);
    }
  }, delay);
42 
  return () => clearTimeout(handle);
}, [query, minLength, delay]);
45 
const onChange = useCallback(
  (e: React.ChangeEvent<HTMLInputElement>) => setQuery(e.target.value),
  [],
);
50 
return { query, suggestions, loading, onChange };
52}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Debouncing via setTimeout with an effect cleanup avoids firing a request on every keystroke.
2An AbortController ref lets you cancel in-flight requests so slow responses never overwrite newer ones.
3Guarding state updates against the current controller keeps loading flags accurate under rapid input.

Related explainers

python

import base64
import json
from typing import Annotated, Optional

Cursor pagination in a FastAPI endpoint

pagination cursor async

Intermediate 9 steps

typescript

import { Body, Controller, Ip, Post, UnauthorizedException } from '@nestjs/common';
import { Throttle, ThrottlerGuard } from '@nestjs/throttler';
import { UseGuards } from '@nestjs/common';
import { AuthService } from './auth.service';

Rate-limiting an auth flow in NestJS

rate-limiting authentication guards

Intermediate 8 steps

typescript

import { Component, computed, DestroyRef, inject, input, output, signal } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { interval, map, takeWhile } from 'rxjs';

How a signal-driven countdown works in Angular

signals reactivity rxjs

Intermediate 8 steps

typescript

type TokenType = "keyword" | "string" | "comment" | "number" | "text";
 
interface Token {
  type: TokenType;

How a regex tokenizer highlights code

tokenizer regex lexing

Intermediate 10 steps

typescript

import { Component, inject, signal } from '@angular/core';
import { CdkDragDrop, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
import { HttpClient } from '@angular/common/http';
import { finalize } from 'rxjs';

Drag-and-drop reordering with signals in Angular

drag-and-drop signals optimistic-update

Intermediate 8 steps

typescript

type Middleware<TIn, TOut> = (ctx: TIn) => Promise<TOut> | TOut;
 
class Pipeline<TIn, TOut> {
  private constructor(private readonly run: Middleware<TIn, TOut>) {}