<aside> 💡 2022.12.05. 김관경

</aside>

React Hook useCallback received a function whose dependencies are unknown. Pass an inline function instead.

• useCallback이 아래와 같이 함수를 감싼 함수를 받게되면 발생하는 에러였다. useCallback 내부에서 함수를 실행하고 있는 것이 아니라, 함수의 반환값을 받고 있기 때문이었다.

const moveSectionScroll = useCallback(
    throttle((e: WheelEvent) => {
      e.preventDefault();
      // 아래 스크롤
      if (e.deltaY > 0 && pageRef.current < maxPage) {
        pageRef.current += 1;
      }
      if (e.deltaY < 0 && pageRef.current > 0) {
        pageRef.current -= 1;
      }

      window.scrollTo(0, pageRef.current * window.innerHeight);
    }, 500),
    [maxPage],
  );

문제 분석

• useCallback은 함수를 반환하기 때문이다. TS의 입장에서 throttle()이라는 함수는 함수가 아니라 throttle이 반환하는 반환 값이다.
• 이런 배경으로 eslint가 useMemo와 useCallback을 아래와 같이 parsing 하기 때문에 그 과정에서 발생한 에러였다.

useMemo(() => foo, [foo]);
useCallback((bar) => foo(bar), [foo]);

• 즉, 아래와 같이 eslint가 반환받은 함수를 값이라고 memoize 하며 제대로 parseing하지 못하면서 에러가 발생한 것이다.

const moveSectionScroll = useCallback(
  (callback: CallbackFunc<any[]>, waitingTime: number) => (...args: any[]) => {
    if (isWaiting) {
      callback(...args);
      isWaiting = false;
      setTimeout(() => {
        isWaiting = true;
      }, waitingTime);
    }
  }
);

문제 해결

• useCallback이 아닌 useMemo를 사용하여 useCallback의 동작을 만들어주어서 해결할 수 있었다.
• useMemo로 직접 useCallback을 구현하여 eslint가 반환 받은 함수를 값으로 처리할 수 있도록 도와주는 것이다.

const moveSectionScroll = useMemo(
    () => throttle((e: WheelEvent) => {
      e.preventDefault();
      // 아래 스크롤
      if (e.deltaY > 0 && pageRef.current < maxPage) {
        pageRef.current += 1;
      }
      if (e.deltaY < 0 && pageRef.current > 0) {
        pageRef.current -= 1;
      }

      window.scrollTo(0, pageRef.current * window.innerHeight);
    }, 500),
    [maxPage],
  );

/ 참고자료

React Hook useCallback received a function whose dependencies are unknown. Pass an inline function instead