Reactでdebounceを実装するメモ

Reactでdebounceを実装するメモ

debounce処理とは頻繁に発生するイベントや関数呼び出しを制御するための手法。例えばSNSにおけるいいね・Likeボタンを繰り返しクリックされるとそのたびに処理が行われて過度な処理が発生する。なので繰り返しクリックが止まったタイミングでAPI通信を行うとパフォーマンスの向上が見込める

実装

use-debounce

use-debounceというライブラリを使用すると簡単に実装できます。

以下README.mdの冒頭より引用

• Small size < 1 Kb
• Compatible with underscore / lodash impl
• learn once, use everywhere Server-rendering friendly!

実装したコード

useDebounceはvalueを監視、useDebounceCallbackは関数自体を監視対象にする。2つめの引数に監視する間隔を渡す。

import { useState } from "react";
import { useDebounce, useDebouncedCallback } from "use-debounce";

export default function Home() {
  const [count, setCount] = useState<number>(0);
  const [value] = useDebounce(count, 1000)
  const func = useDebouncedCallback(
    () => {
      setCount(count + 1)
    },
    1000
  )

  return (
    <div>
      <p>{value}</p>
      <button onClick={() => setCount((c) => c + 1)}>クリック</button>
      <button onClick={() => func()}>クリック1</button>
    </div>
  );
}

実行結果

それぞれ５回ずつクリックを行っている。

1. valueを監視対象にする

2. 繰り返し呼び出される関数を監視対象にする

参考

最後に

間違っていることがあれば、コメントに書いていただけると幸いです。
よろしくお願いいたします。