- debounce - 基本的なデバウンス関数
const debouncedSetCount = useCallback(
debounce(setDebouncedCount, {
wait: 500,
leading: true, // 最初の呼び出しを即座に実行
}),
[],
)- 関数の実行を遅延させる基本的なデバウンス
- wait: 待機時間（ミリ秒）
- leading: trueにすると最初の呼び出しを即座に実行
- useCallbackで参照を安定化する必要がある
- asyncDebounce - 非同期関数用デバウンス
const debouncedSetSearch = useCallback(
asyncDebounce(
async (value: string) => {
const results = await simulateSearch(value)
setSearchResults(results)
},
{ wait: 500 }
),
[],
)- Promise/async関数用のデバウンス
- API呼び出しなど非同期処理に最適
- エラーハンドリングとローディング状態の管理が可能
- useDebouncedCallback - Hook版デバウンス
const debouncedSetCount = useDebouncedCallback(setDebouncedCount, {
wait: 500,
enabled: () => instantCount > 2, // 条件付き有効化
leading: true,
})
- useCallback不要で自動的に安定した参照を提供
- enabled: 条件に基づいてデバウンスを有効/無効化
- useDebouncedState - デバウンスされた状態管理
const [debouncedCount, setDebouncedCount, debouncer] = useDebouncedState(
instantCount,
{ wait: 500 }
)
- 即座の値とデバウンスされた値を別々に管理
- debouncerインスタンスで詳細な制御が可能：
- getIsPending(): 保留中の実行があるか
- getExecutionCount(): 実行回数
- getOptions(): 現在のオプション
- useDebouncedValue - 値の監視とデバウンス
const [debouncedCount] = useDebouncedValue(instantCount, { wait: 500, enabled: instantCount > 2, })
- 既存の状態値を監視してデバウンスされた値を返す
- 最もシンプルで高レベルなAPI
- 読み取り専用のデバウンス値が必要な場合に最適
- useAsyncDebouncer - 高度な非同期デバウンス
const setSearchAsyncDebouncer = useAsyncDebouncer(handleSearch, { wait: 500, onError: (error) ⇒ { setError(error as Error) }, })
const handleSearchDebounced = setSearchAsyncDebouncer.maybeExecute
- 非同期処理用の高度なデバウンサー
- maybeExecute: デバウンスされた実行関数
- getSuccessCount(): 成功した実行回数
- エラーハンドリングとキャンセル機能内蔵
使い分けガイド
- シンプルな値のデバウンス: useDebouncedValue
- 状態の即座/遅延管理: useDebouncedState
- 関数の安定したデバウンス: useDebouncedCallback
- API呼び出し: useAsyncDebouncer
- 手動制御が必要: 基本の debounce / asyncDebounce