useDebounce Hook/ setTimeout() / clearTimeout()

[ 기능 설명 ]

사용자가 특정 시간동안 타이핑을 멈출 때 까지 keyup 이벤트의 처리를 지연시키는 기능

UI 코드가 모든 이벤트를 처리할 필요가 없어 API 호출 수가 줄어들고 성능이 향상 됨.

export const useDebounce = (value, delay) => {
  const [debounceValue, setDebounceValue] = useState(value);
  
  
  useEffect(()=>{
    // update debounced value after delay
    const handler = setTimeout(()=>{
      setDebounceValue(value);
    }, delay);
    
    // timeout 호출 도중에 value 나 delay가 변경되어 다시 호출되면 clearTimeout으로 없애준다.
    return () => {
      clearTimeout(handler);
    }
  },[value, delay])
  
    return debounceValue;
}

 

• setTmeout() 메서드 :

비동기 함수로 특정 시간 후에 지정 된 콜백 함수를 실행하도록 예약한다.

setTimeout()은 실행되면 즉시 타이머 ID를 반환하고,

반환된 타이머 ID를 변수에 담는 것과 별개로, 예약된 콜백 함수는 지정된 시간이 지나면 자동으로 실행된다.

 

• clearTimeout() 메서드 :

setTimeout() 으로 생성한 타임아웃을 취소한다.

clearTimeout(timeoutID)
// timeoutID 은 취소할 타임아웃의 식별자

 

 

Debounce Hook 사용 :

const debouncedValue = useDebounce(value, delay);

ex.
const [searchValue, setSearchValue] = useState('');
const delayedSearchValue = useDebounce(searchValue, 500);

 

useDebounce

const [search, setSearch] = useState<string>('');
const debouncedValue = useDebounce<string>(search, 1200);
useEffect(() => {
  if (debouncedValue) {
    console.log(debouncedValue);
  }
}, [debouncedValue]);


<input
  value={search}
  onChange={(e) => {
    setSearch(e.target.value);
  }}
/>

useDebounce : 검색시 딜레이 주기

https://yun-tech-diary.tistory.com/entry/useDebounce%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0