useDebounce

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

서버로 전송되는 api 호출 수도 크게 줄어들어 성능이 저하되거나 백엔드의 불필요한 로드가 추가되는 것을 방지 할 수 있다

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
}

• 유저가 value값을 입력하고 지정한 시간 내에 또다른 값을 입력 했다고 하면 이전에 입력한 값은 clearTimeout()을 통해 삭제되고 새로운 값이 setDebounceValue(value)로 들어간다

  const [keyWords,setKeywords]=useSearchParams()
  const navigate=useNavigate()

  const keyValue=keyWords.get('q')
  const debounceSearchTerm=useDebounce(keyValue,500)

  const fetchSearchMovie=async()=>{
    try{
     const request=await axios.get(`/search/multi?include_adult=false&query=${keyValue}`)
     setSearchResults(request.data.results)
    }catch(e){
      console.log(e)
    }
  }

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

• 유저가 검색한 값(keyValue)을 useDebounce의 value값을 넣어주고 delay시간을 넣어준다

• useEffect를 통해 api를 가지고 오는 fetchSearchMovie에 넣어준다