>
[Next.js] フォームでユーザーが入力を止めた時に処理を実行する方法: デバウンス
Next.jsのフォームでユーザーが入力を止めた時に処理を実行する方法(デバウンス)について説明します。
デバウンスとは
デバウンスとは、関数が実行される頻度を制限する手法です。この記事の例では、ユーザーが入力を止めた時にのみデータベースからデータを取得しています。
デバウンスの実装方法
ライブラリuse-debounceをインストールします。
npm i use-debounce処理を実装します。
components/my-component.tsx
'use client';
import { useDebouncedCallback } from 'use-debounce';
// ...
const MyComponent = () => {
// ...
const handleSearch = useDebouncedCallback((keyword: string) => {
// データを取得する処理
}, 300);
return (
<input onChange={e => handleSearch(e.target.value)} />
);
}この例では、ユーザーが入力を止めてから300ミリ秒後に処理を実行します。