Code Generator

import { useCallback, useEffect, useState } from "react";

export function useDebouncedSearch<T>(
  fetcher: (q: string, signal: AbortSignal) => Promise<T[]>,
  delay = 320
) {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState<T[]>([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!query.trim()) {
      setResults([]);
      return;
    }
    const ac = new AbortController();
    const t = window.setTimeout(async () => {
      setLoading(true);
      try {
        const data = await fetcher(query, ac.signal);
        setResults(data);
      } finally {
        setLoading(false);
      }
    }, delay);
    return () => {
      clearTimeout(t);
      ac.abort();
    };
  }, [query, delay, fetcher]);

  const onChange = useCallback((v: string) => setQuery(v), []);
  return { query, onChange, results, loading };
}