Debounce와 Throttle

Debounce vs Throttle

1. 성능 저하: 컴포넌트가 불필요하게 재렌더링되면 성능이 저하될 수 있습니다. 특히 컴포넌트 계층 구조가 깊거나 복잡한 경우에 잦은 리렌더링은 성능에 미치는 영향이 더 커집니다.

2. 불필요한 데이터 요청: 컴포넌트가 리렌더링되면 해당 컴포넌트 내의 데이터 요청도 발생할 수 있습니다. 불필요한 리렌더링은 따라서 불필요한 데이터 요청을 유발할 수 있습니다.

3. 컴포넌트 state 손실: 잦은 리렌더링으로 인해 컴포넌트의 상태(state)가 예상치 못하게 잃어버릴 수 있습니다.

Debounce

연이은 이벤트 중 마지막 이벤트만 인식한다.

Debounce 구현

function SearchInput() {
  const [query, setQuery] = useState('');
  const [tmpQuery, setTmpQuery] = useState(query);
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => setTmpQuery(e.target.value);

  useEffect(() => {
    const debounce = setTimeout(() => {
      return setQuery(tmpQuery);
    }, 300); 				//->setTimeout 설정
    return () => clearTimeout(debounce); //->clearTimeout 바로 타이머 제거
  }, [tmpQuery]);			//->결국 마지막 이벤트에만 setTimeout이 실행됨

  return (
    <>
      <SearchInputBlock>
        <div className='search-Input'>
          <SearchIcon />
          <input value={tmpQuery} onChange={handleChange} />
        </div>
      </SearchInputBlock>
      <SearchResult query={query} />
    </>
  );
}

useEffect(() => {
    const debounce = setTimeout(() => {
      return setQuery(tmpQuery);
    }, 300); 				//->setTimeout 설정
    return () => clearTimeout(debounce); //->clearTimeout 바로 타이머 제거
  }, [tmpQuery]);			//->결국 마지막 이벤트에만 setTimeout이 실행됨

1. useEffect에서 tmpQuery의 변경을 감지한다. tmpQuery가 변경될 때마다 내부 코드 블록이 실행된다.

2. setTimeout 함수를 호출하여 300ms 후에 실행되는 타이머를 설정한다. 이 타이머는 setQuery(tmpQuery); 를 호출한다.
1. 이때, tmpQuery는 useEffect의 의존성 배열에 포함되어 있으므로, tmpQuery가 변겨될때마다 새로운 타이머가 설정된다.
2. 마지막 변경된 tmpQuery에 대한 setQuery가 호출된다.

3. useEffect의 반환문에서는 이전 타이머가 존재하면(clearTimeout) 그 타이머를 취소한다. 이로써 이전에 설정된 타이머는 실행되지 않게 됩니다.

Debounce → Throttle

const [throttle, setThrottle] = useState<boolean>(false);

useEffect(() => {
    if (throttle) return;
    if (!throttle) {
      setThrottle(true);
      setTimeout(async () => {
        setSearchValue(tmpValue);
        setThrottle(false);
      }, 300);
    }
  }, [tmpValue]);

Throttle

이벤트가 발생하고서 일정 주기마다 이벤트가 발생되도록 한다. (일정주기가 끝나지 않으면 이벤트를 호출하지 않는다.)

Throttle 구현

export default function useGetWindowScrollHeight() {
  const [windowScrollHeight, setWindowScrollHeight] = useState<number>(0);
  let throttling = false;

  function onScroll() {
    if (throttling) return;
    throttling = true;

    setTimeout(() => {
      setWindowScrollHeight(window.scrollY);
      throttling = false;
    }, 200);
  }

  useEffect(() => {
    setWindowScrollHeight(window.scrollY);
    window.addEventListener('scroll', onScroll, { passive: true });

    return () => {
      window.removeEventListener('scroll', onScroll);
    };
  }, []);

  return windowScrollHeight;
}

let throttling = false;
function onScroll() {
    if (throttling) return;
    throttling = true;

    setTimeout(() => {
      setWindowScrollHeight(window.scrollY);
      throttling = false;
    }, 200);
}

1. throttling 값이 true일 때는 이벤트를 실행하지 않는다.

2. 0.2초 간격으로 throttling값이 바뀐다.

3. 그래서 0.2초 마다 이벤트가 호출된다.

Throttle → Debounce

마무리

References

Debounce 와 Throttle 리액트로 구현하기

스타트업 과제를 하면서 debounce를 접할 일이 생겼다.예전 쇼핑하우 프로젝트를 할 때 처음 썼던 debounce..제대로 정리하지 못하고 넘어간 것 같아 항상 머리 속에 정리해야지라는 미련(?)이 떠나질 않았는데이번 과제를 정리할 기회를 얻게 되어 기쁜 마음으로

https://velog.io/@skawnkk/debounce-throttle

[React] 브라우저 크기 감지, throttle, debounce

바로 직전 포스팅에서 antd 그리드를 이용해서 브라우저 화면 사이즈에 따라 반응하는 페이지를 만들어 보았다. 정확히 768px에 바뀌는지 보려고 현재 화면의 너비를 리액트 컴포넌트에 띄워주려고 한다. 1. resize 이벤트 resize 이벤트는 document view의 크기가 변경될 때 발생한다. 이벤트가 발생할 때마다 width state에 브라우저의 너비가 저장되도록 했다. useEffect를 이용해서 컴포넌트가 마운트 될 때 해당 함수를 실행한다. const [width, setWidth] = useState(window.innerWidth); const handleResize = () => { setWidth(window.innerWidth); }; useEffect(() => { windo..

https://9yujin.tistory.com/20