Reactで、入力が止まるまで検索を待つカスタムフックの作り方

import { useEffect, useState } from 'react';

// value が delayMs のあいだ変わらなかったら、その値を返す
export function useDebouncedValue<T>(value: T, delayMs: number): T {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delayMs);
    return () => clearTimeout(id);
  }, [value, delayMs]);
  return debounced;
}

import { useEffect, useEffectEvent, useState } from 'react';
import { useDebouncedValue } from './useDebouncedValue';

export type SearchStatus = 'idle' | 'pending' | 'done' | 'error';

type Options = { delayMs?: number; minLength?: number };

// 入力が delayMs のあいだ止まったら search を呼び、結果を返す
export function useDebouncedSearch<T>(
  text: string,
  search: (query: string, signal: AbortSignal) => Promise<T[]>,
  { delayMs = 300, minLength = 1 }: Options = {},
) {
  const trimmed = text.trim();
  const query = useDebouncedValue(trimmed, delayMs);
  const [result, setResult] = useState<{ query: string; items: T[]; error: unknown }>({
    query: '',
    items: [],
    error: null,
  });

  // 使う側が描画のたびに新しい関数を渡しても、エフェクトを動かし直さない
  const runSearch = useEffectEvent(search);

  useEffect(() => {
    if (query.length < minLength) return;
    const controller = new AbortController();
    runSearch(query, controller.signal).then(
      (items) => {
        if (!controller.signal.aborted) setResult({ query, items, error: null });
      },
      (error) => {
        if (!controller.signal.aborted) setResult({ query, items: [], error });
      },
    );
    // 次の語で検索し直すときや、画面から消えるときに、前のリクエストを取り消す
    return () => controller.abort();
  }, [query, minLength]);

  if (trimmed.length < minLength) return { status: 'idle' as SearchStatus, items: [] as T[], query: '' };
  const status: SearchStatus =
    result.query !== trimmed ? 'pending' : result.error ? 'error' : 'done';
  return { status, items: result.items, query: result.query };
}

const STATUS_LABELS = { idle: '', pending: '入力待ち・検索中…', done: '', error: '検索できませんでした' };

export function CatSearch({ delayMs = 300 }: { delayMs?: number }) {
  const [text, setText] = useState('');
  const { status, items, query } = useDebouncedSearch(text, searchCats, { delayMs });

  return (
    <div>
      <input aria-label="猫の名前で検索" data-testid="q" value={text} onChange={(e) => setText(e.target.value)} />
      <p data-testid="status">{STATUS_LABELS[status]}</p>
      {status !== 'idle' && (
        <ul data-testid="results" data-query={query} style={{ opacity: status === 'pending' ? 0.5 : 1 }}>
          {items.map((cat) => (
            <li key={cat.id}>{cat.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

nodelay: サーバーが受けたリクエスト 4 件: し(aborted) しろ(aborted) しろた(aborted) しろたま(done)
  表示: data-query="しろたま" [しろたま]
hook: サーバーが受けたリクエスト 1 件: しろたま(done)
  表示: data-query="しろたま" [しろたま]

noabort: 「みけこ」まで入力して 800ms 後の表示: data-query="みけこ" [みけこ]
noabort: さらに 1500ms 後の表示: data-query="み" [みけ, みけこ] 入力欄「みけこ」
  リクエスト: み(done) みけこ(done)
hook: 「みけこ」まで入力して 800ms 後の表示: data-query="みけこ" [みけこ]
hook: さらに 1500ms 後の表示: data-query="みけこ" [みけこ] 入力欄「みけこ」
  リクエスト: み(aborted) みけこ(done)

入力直後: 状態「入力待ち・検索中…」 リクエスト 0 件
止まって 350ms: 状態「入力待ち・検索中…」 リクエスト 1 件: くろ(pending)
止まって 750ms: 状態「」 表示: data-query="くろ" [くろ, くろまめ]
入力欄を空にして 500ms: 状態「」 表示: （一覧なし） リクエスト 1 件

deps: サーバーが受けたリクエスト 9 件（最初の3件: くろ(done) くろ(done) くろ(done)）
  表示: data-query="くろ" [くろ, くろまめ]
inline: サーバーが受けたリクエスト 1 件（最初の3件: くろ(done)）
  表示: data-query="くろ" [くろ, くろまめ]

  compositionstart data=""
  input data="k" isComposing=true value=k
  input data="く" isComposing=true value=く
  input data="くr" isComposing=true value=くr
  input data="くろ" isComposing=true value=くろ
hook: 確定する前のリクエスト: く(done) くろ(pending)
  input data="くろ" isComposing=true value=くろ
  compositionend data="くろ"

export function CatSearchIme() {
  const [text, setText] = useState('');
  const [committed, setCommitted] = useState('');
  const { status, items, query } = useDebouncedSearch(committed, searchCats);

  return (
    <div>
      <input
        aria-label="猫の名前で検索"
        data-testid="q"
        value={text}
        onChange={(e) => {
          setText(e.target.value);
          if (!(e.nativeEvent as InputEvent).isComposing) setCommitted(e.target.value);
        }}
        onCompositionEnd={(e) => setCommitted(e.currentTarget.value)}
      />

ime: 確定する前のリクエスト: なし
ime: 確定して 600ms 後のリクエスト: くろ(done) 表示: data-query="くろ" [くろ, くろまめ]