쓰로틀링, 디바운싱

• loadash에서 쉽게 구현 가능하다.

쓰로틀링

함수 호출 이후 일정 시간이 지나기전에 다시 호출되지 않음을 보장하는것
// 스크롤 액션에서 과도한 리랜더링을 피하고자할때 적합

디바운싱

• 연속으로 호출된 함수들 중 마지막에 호출된 함수만 실행 함
  // 검색어 추천 기능시 문자가 한번 입력할때마다 쿼리가 날라가지 않도록 해주는 기능에 적합

작동하지 않는 예제

• 이론적으로, 사용자가 입력을 멈춘 후 300밀리초 후에 실행되어야 합니다.

• 그러나 이 구현은 작동하지 않습니다. 검색 기능은 호출되지 않습니다. 😕

• 사용자가 문자를 입력할 때 debounce 기능이 손실되고, onChange 기능이 다시 호출되기 때문에 작동하지 않습니다.

async function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
  debounce(async () => {
    // 😕 이렇게쓰면 작동하지 않음
    setCharacters(await search(e.target.value));
  }, 300);
}

작동하는 예제

• 외부에서 HOF로 문제를 해결합니다. 하지만 이것보다 더 좋은 해결 방안이 있습니다.

const debouncedSearch = debounce(async (criteria) => {
  setCharacters(await search(criteria));
}, 300);

async function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
  debouncedSearch(e.target.value);
}

더 좋은 해결방안

• 매번 컴포넌트가 리렌더링이 일어날때마다 반응하지 않도록 useRef를 이용합니다.

const debouncedSearch = React.useRef(
  debounce(async (criteria) => {
    setCharacters(await search(criteria));
  }, 300)
).current;

Cleaning up

• 컴포넌트가 마운트 해제될 때 debouncedSearch 요청이 계속 진행 중일 수 있습니다. 이 경우 side effect가 발생합니다.

• 이 문제를 해결하기 위해 useEffect hook을 사용하여 함수를 취소할 수 있습니다.

React.useEffect(() => {
  return () => {
    debouncedSearch.cancel();
  };
}, [debouncedSearch]);