김민태의 데브캠프 2기 - useDebounce Coustom Hooks 만들기

예전에 작성한 포스트에서 입력받은 값을 키워드로 게시물 등을 찾을 때, 값 하나를 입력할 때 마다 APi를 호출했었다.

하지만 이 경우, 백엔드 및 서버에 무리가 간다.

 

따라서 Debounce를 사용하여 이를 방지하고자 한다.

 

Debounce function은 사용자가 미리 결정된 시간 동안 타이핑을 멈출 때 까지 keyup 이벤트 처리를 지연한다.
이를 통해 UI 코드가 모든 이벤트를 처리할 필요가 없고, 서버로 전송되는 API 호출 수도 크게 줄어든다.

 

 

구현 코드 

 

useDebounce.js

export const useDebounce = (value, delay) => {

    const [debouncedValue, setDebouncedValue] = useState(value);

    useEffect(() => {

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

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

    return debouncedValue
}

 

App.jsx

사용 방법

  const debouncedSearchTerm = useDebounce(searchTerm, 500);
  
    useEffect(() => {
    if (debouncedSearchTerm) {
      handleSearchInput(debouncedSearchTerm);
    } else {
      fetchPokeData(true);
    }
  }, [debouncedSearchTerm]);