debounce と throttle の React Custom Hooks を実装してみる
throttle や debounce は連続して大量に繰り返される処理を間引いて負荷を軽減させたりするときに使います。
今回はそれらの間引き処理を React Hooks で実装してみました。
react-use に useDebounce と useThrottle が実装されているので自前で実装する必要性を感じない方はそちらを使用すると良いと思います。 github.com
throttle, debounce とは？
throttle
- 連続して大量に繰り返される処理を一定感覚で間引く。
- scroll イベントでよく使用される。
debounce
- 連続して大量に繰り返される処理が指定時間内に何度発生しても最後の1回だけ実行する。
- resize イベント、インクリメンタルサーチなどで使用される。
実装してみる
間引く間隔はデフォルト1秒に設定しています。
throttle のテキストボックスに文字を入力してみると、一定間隔でイベントが実行されるのが分かります。
一方 debounce は文字入力中はイベントが発火せず、最後のイベントのみ実行されています。
