디바운스

검색창에 타이핑 될 때마다 유튜브 api 검색 요청이 들어가 api 사용량을 초과하는 일이 발생

⇒ debounce를 걸어 타이핑이 끝난 후 검색 요청이 수행되도록 변경

const useSearch = (keyword: string) => {
  const [debouncedKeyword, setDebouncedKeyword] = useState(keyword);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedKeyword(keyword);
    }, 200);  

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

  return useQuery<Response>({
    queryKey: ["search", debouncedKeyword],
    queryFn: () => fetchSearch(debouncedKeyword),
    enabled: !!keyword,
  });
};