react debounced state

검색 같은 곳에서 state의 변화에 따라 자동으로 검색이 되는 경우에 사용하면 좋다

// useDebouncedValue.ts
import { useState, useEffect } from "react";

export default function useDebouncedValue<T = any>(
  value: T,
  delay: number = 500
) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

const [keyword, setKeyword] = useState("");
const debouncedKeyword = useDebouncedValue(keyword);