• 목록

✅ useDebounce 없이 입력 처리하는 건 고문이다

입력 지연 처리, 이 한 줄로 끝낸다

검색창 자동완성이나 필터링 기능에서
입력할 때마다 API 호출하면 너무 과하다:

const [query, setQuery] = useState("");
useEffect(() => {
  fetchData(query);
}, [query]);

이렇게 하면 입력할 때마다 호출됨,
→ 성능 저하 + 불필요한 요청 폭주

✅ 해결: useDebounce 훅으로 딜레이 적용

function useDebounce(value, delay) {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const handler = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(handler);
  }, [value, delay]);
  return debounced;
}

const debouncedQuery = useDebounce(query, 300);
useEffect(() => {
  fetchData(debouncedQuery);
}, [debouncedQuery]);

불필요한 호출은 줄이고,
사용자는 부드럽고 빠르게 느낀다.