사용자 지정 React 후크: useDebouncedEffect()

배경

최근에 포스터가 디바운스 방식으로 useEffect를 실행하려고 하는 Stackoverflow에 대한 질문을 보았습니다.

스크린샷은 다음과 같습니다.



이는 일부 효과를 실행해야 하지만 종속성에 대한 모든 변경 사항에 대해서는 실행하지 않는 상황이 있는 만큼 여러 번 의미가 있습니다. 예: API를 호출하는 유형 검색 표시줄에서 리소스 활용을 최적화하기 위해 디바운스 방식으로 실행useEffect할 수 있습니다.

나는 대답을 시도하고 문제를 해결하기 위해 사용자 정의 후크를 만들려고했습니다. 아래 후크를 요약하려고 합니다.

후크

이것은 사용자 지정 후크가 따르는 기본 구조입니다.

const useDebounceEffect = (fnc, deps, delay) => {

 useEffect(() => {


 },deps);

}

표준 useEffect의 매개변수 외에도 delay 매개변수도 있습니다. 후크는 내부적으로 여전히 useEffect 를 사용합니다.

콜백 함수를 예약하려면 setTimeout를 사용해야 합니다. 이 시간 초과도 지워야 하므로 시간 초과 ID를 유지하는 것이 중요합니다. 시간 초과 ID를 보유하는 ref가 필요합니다. ID가 변경될 때마다 다시 렌더링하지 않으려면 상태 변수가 필요하지 않습니다.

const useDebounceEffect = (fnc, deps, delay) => {
  const ref = useRef();

  useEffect(() => {
    clearTimeout(ref.current);
    ref.current = setTimeout(() => {
      fnc();
      clearTimeout(ref.current);
    }, delay);
  }, deps);
};

후크가 거의 준비된 것처럼 보이지만 한 가지 문제가 있습니다.
종속성이 완전하지 않습니다. 렌더링 후 fnc가 변경되거나 delay가 변경되면 효과가 트리거되지 않습니다.

린터에서도 이에 대한 경고를 받고 이를 수정하여 후크를 완료합니다.

const useDebounceEffect = (fnc, deps, delay) => {
  const ref = useRef();

  useEffect(() => {
    clearTimeout(ref.current);
    ref.current = setTimeout(() => {
      fnc();
      clearTimeout(ref.current);
    }, delay);
  }, [fnc, ...deps,delay]);
};

종속성에서 ref를 언급할 필요가 없다는 점에 유의하십시오. ref.current는 변경 가능한 컨테이너이고 ref.current를 변경해도 다시 렌더링되지 않으므로 항상 올바른 값을 갖습니다.

연결

이것으로 후크가 완성되었습니다. 다음은 original question 및 running demo에 대한 링크입니다.