Debounce과 Throttle

Debounce와 Throttle은 함수가 너무 자주 호출하는 것을 방지한다.

 

Debounce

이벤트가 연속적으로 발생할 때, 제일 마지막 이벤트가 발생한 후 일정 시간이 지난 후에 함수를 호출한다.

 

export function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedInput] = useState(value);

  useEffect(() => {
    const timerID = setTimeout(() => {
      setDebouncedInput(value);
    }, delay)

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

  return debouncedValue;
}

 

 

useDebounce는 커스텀 훅에서 가장 핵심은 clearTimout(timerID) 이다.

value가 변경될 때마다 컴포넌트가 리렌더링되면서 useEffect가 실행된다.
이때, 기존 setTimeout을 clearTimeout으로 제거하고 새로운 setTimeout을 설정한다.
이 과정이 반복되다가 마지막 입력 후 일정 시간(delay)이 지나면 setTimeout이 실행되어 debouncedValue가 업데이트된다. (마지막 이벤트 때 발생한다.)

 

 

---

 

 

Throttle

함수가 한번 호출되면, 일정 시간이 지나기 전에 다시 호출되지 않도록 막는 것이다.

 

 

export function useThrottle(callback, delay) {
  const lastRun = useRef(Date.now())

  return () => {
    const timeElapsed = Date.now() - lastRun.current

    if (timeElapsed >= delay) {
      callback()
      lastRun.current = Date.now()
    }

  }
}

 

이 코드의 핵심은 이전 함수 실행 시간과 현재 시간의 차이(timeElapsed)를 계산하여,
delay가 지나기 전까지는 함수를 실행하지 않는 것이다.

 

 

 

---

 

 

Debounce와 Throttle, 언제 사용할까?

 

Debounce

• 검색창 자동완성 (입력이 멈추고 나서 API 호출)
• 폼 입력 검증 (사용자가 타이핑 중일 때 불필요한 요청 방지)

 

Throttle

• 스크롤 이벤트 (매 프레임마다 실행되지 않도록 제한)
• 버튼 클릭 방지 (사용자가 너무 빠르게 여러 번 클릭하는 걸 방지)
• 마우스 이동 이벤트 (마우스 이동 시 지나치게 많은 연산 방지)