検索 Debounce（300ms）

用途

検索入力を debounce して API 呼び出しを節約。リアルタイム検索の標準。

特徴

• 300msデバウンス
• AbortController で中断
• インクリメンタル検索

コード（コピペ用）

import { useEffect, useState } from 'react';

export function useDebouncedValue<T>(value: T, delay = 300): T {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const t = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(t);
  }, [value, delay]);
  return debounced;
}

// 使い方:
// const [q, setQ] = useState('');
// const debouncedQ = useDebouncedValue(q, 300);
// useEffect(() => { if (debouncedQ) search(debouncedQ); }, [debouncedQ]);

使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

注意事項

• 依存パッケージを忘れず追加