React - Debounce

Debounce

그게 뭔데?

디바운스는 DOM의 이벤트의 실행 빈도를 줄여 성능상의 이점을 얻기 위해 사용한다.
여러번 발생하는 이벤트에서 가장 마지막 이벤트만 실행한다.

input에 사용

input에 안녕 이라는 문자를 입력하는 경우~

적용전: 'ㅇ'입력 > 리렌더링 > '아'입력 > 리렌더링 > '안'입력 > 리렌더링 > '안ㄴ'입력 > 리렌더링 > ...
적용후: 'ㅇ'입력 > 3초 이내 '아'입력 > 3초 이내 '안'입력 > 3초 동안 입력없음 > 리렌더링 > '안ㄴ'입력...

설정해둔 타이머가 끝나기 전에 입력하면 렌더링 횟수를 크게 줄일 수 있다.
단 설정해둔 시간이내에 계속에서 입력을 해야 렌더링 횟수를 줄일 수 있으므로 타이머를 너무 짧게 잡으면 적용전과 동일한 효과가 발생할 수도 있다.

굳이 해야해?

위의 경우에서는 리렌더링 이지만, 리렌더링이 아니라 서버를 호출하는 이벤트 발생이라면 비용의 문제가 발생한다.

구현 방법

const [search, setSearch] = useState('');

const debounce = (callback, delay) => {
    let timerId;
    return (...args) => {
      if (timerId) clearTimeout(timerId);
      timerId = setTimeout(() => {
        callback(...args);
      }, delay);
    };
  };
  
  const onChangeSearch = useCallback(
    debounce((value) => {
      setSearch(value);
    }, 500),
    []
  );