React Hooks useDebounceを作る

2022-04-04
2022-04-04

Intro

debounceは、負荷対策として利用され、一定時間経過した後に、処理を実行させる。

クライアント側での検索で、使えそうなので、作ってみる。

Custom Hooks

useDebounce.ts
import { useEffect, useState } from 'react'; export function useDebounce(value: string, delay: number) { const [debouncedValue, setDebouncedValue] = useState(value); useEffect(() => { const timer = setTimeout(() => { setDebouncedValue(value); }, delay); return () => { clearTimeout(timer); }; }, [value, delay]); return debouncedValue; }

使い方

index.tsx
export function Index() { const [searchText, setSearchText] = useState(''); const debouncedSearchText = useDebounce(searchText, 200); // 👈 msで遅延させる。 ...