【備忘録】 Next.jsで関数の実行をdebounceする

はじめに

この記事は use-debounce の使い方の 備忘録 です。

debounceとは

一定時間内 の 関数実行 の 回数 を 制限 することです。

debounce の サイクル は
1.debounceされた関数 の 実行 が行われると タイマーが開始 される。
2.タイマーが終わる までに debouceされた関数 が 再度実行 されると タイマー が リセット される。
3.タイマーが終わる と debouceされた関数 の callback関数 が 実行 される。

というサイクルです。

インストール

npm install use-debounce

callback関数をdebounceする

app/page.tsx

"use client";
import { useDebouncedCallback } from "use-debounce";

export default function Home() {
  const debounceCallback = useDebouncedCallback((e) => {
    console.log(e.target.value);
  }, 1000);
  
  return (
    <div>
      <input onChange={(e) => debounceCallback(e)} defaultValue={"Hello"}/>
    </div>
  );
}

さいごに

学習させていただいた先・ライブラリの公式ドキュメントです。