Closed1

デバウンス(debounce)とは

301 Moved Permanently301 Moved Permanently

関数が起動できる速度を制限するプログラミング手法。
例えばinputに対してonChangeをつけると入力のたびにコールバックが実行されるため、1文字打つごとにステートが変わる。

これは鬱陶しいので、入力が終わってから状態を変更したい。

  1. トリガーイベント: デバウンスする必要があるイベント (検索ボックスのキーストロークなど) が発生すると、タイマーが開始する。
  2. 待機: タイマーが期限切れになる前に新しいイベントが発生すると、タイマーはリセットされる。
  3. 実行: タイマーがカウントダウンの終わりに達すると、デバウンス関数が実行される。
npm i use-debounce

// ...
import { useDebouncedCallback } from 'use-debounce';
 
// Inside the Search Component...
const handleSearch = useDebouncedCallback((term) => {
  console.log(`Searching... ${term}`);
 
  const params = new URLSearchParams(searchParams);
  if (term) {
    params.set('query', term);
  } else {
    params.delete('query');
  }
  replace(`${pathname}?${params.toString()}`);
}, 300);
このスクラップは2023/12/31にクローズされました