Throttle과 Debounce

스로틀링(Throttling)은 함수가 지정된 시간 동안 최대 한 번 호출되도록 하는 방법입니다.

디바운싱(Debouncing)은 함수가 여러 번 호출되면 일정 시간이 지난 후 마지막에 호출된 함수만 실행되고 이전의 함수는 무시됩니다.

Throttle 사용해보기

Lodash에는 throttle 기능이 내장되어 있습니다.

import { useEffect, useState, useCallback } from 'react';
import { throttle } from 'react';

const App = () => {
  const [value, setValue] = useState(0);
  const throttled = useCallback(throttle((newValue) => console.log(newValue), 3000), []);
  
  useEffect(() => 
            throttled(value), 
  [value])
  
  const onIncrease = () => {
  	setvalue(value+1)
  }
  
  return <button onClick={onIncrease}>{value}</button>
}

export default App;

 throttle는 실행하려는 함수를 지정된 시간 간격으로 호출합니다.

위 예제에서는 5초에 한 번 실행이됩니다.
throttle을 사용하기 위해서는 useRef또는 useCallback으로 함수를 감싸고 사용을 해야합니다.

Debouce 사용하기

debounce또한 lodash의 내장 기능을 이용하여 사용해보도록 하겠습니다.

import { useCallback, useEffect, useState } from 'react';
import { debounce } from 'lodash';

const App = () => {
 const [value, setValue] = useState(0)
 
 const debounced = useCallback(debounce((value) => {
   console.log(value)
 }, 3000), [])
 
 useEffect(() => {
   debounced(value);
 }, [value])
 
 return <button onClick={onIncrease}>{value}</button>
 
 const deboun
}

export default App;

위 코드를 실행해 보시면 버튼을 클릭하고 바로 console.log가 출력되지 않고 3초에 한 번 마지막 값을 기준으로 실행이 되는 것을 볼 수 있습니다.

언제 사용해야할까?

두 기능모두 과도하게 리소스를 사용하는 경우 해당 기능을 사용해서 성능을 최적화 할 수 있습니다.
예를 들어 검색 값의 자동완성값을 api를 통해 받아오는 경우 debounce 기능을 통해 api 호출을 최적화하여 성능면에서 이득을 볼 수 있겠죠??