UseDebounce Custom Hooks 만들기

UseDebounce Custom Hooks 만들기

 

Debouce란? 

 

검색 입력에 입력할 때 입력 결과가 나타날 때까지 지연이 있는 것 

debounce function은 사용자가 미리 결정된 시간 동안 타이핑을 멈출 때까지 keyup 이벤트의 처리를 지연시킨다. 

 

hooks 폴더 및 파일 생성 

 

useDebounce Hooks 생성

UseDebounce.js

import { useEffect, useState } from "react";

export const useDebounce = (value, delay) => {
  const [debounceValue, setDebounceValue] = useState(value); 

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

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

  return debounceValue
}

 

 

searchTerm => debouncedSearchTerm 

index.js

const  debouncedSearchTerm = useDebounce(searchTerm, 500); 

  useEffect(() => {
    if(debouncedSearchTerm) {
      fetchSearchMovie(debouncedSearchTerm)
    }
  }, [debouncedSearchTerm])