useDebounce 커스텀 훅

useDebounce 구현

입력값이 변경된 후 일정 시간이 지나야 실제 값이 업데이트됩니다.

use-debounce.ts

import { useState, useEffect } from "react";
 
export function useDebounce<T>(value: T, delay: number = 300): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);
 
  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
 
    return () => clearTimeout(timer);
  }, [value, delay]);
 
  return debouncedValue;
}

사용 예시: 검색 입력

search-input.tsx

function SearchInput() {
  const [query, setQuery] = useState("");
  const debouncedQuery = useDebounce(query, 300);
 
  useEffect(() => {
    if (debouncedQuery) {
      // API 호출은 타이핑이 멈춘 후 300ms 뒤에 실행
      searchAPI(debouncedQuery);
    }
  }, [debouncedQuery]);
 
  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Search..."
    />
  );
}