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

React Hook useCallback received a function whose dependencies are unknown. Pass an inline function instead. (lint error)

상황

• lodash의 debounce와 useCallback을 같이 사용하려고 할 때, 위와같은 lint error를 마주하게 되었습니다.

const handleRequest = useCallback(debounce(() => {
    setLoading(true);
    setTimeout(() => {
      axios.get('https://jsonplaceholder.typicode.com/todos/1', {
        cancelToken: source.token,
      })
        .then((res) => {
          console.log("res: ", res);
        })
        .catch((thrown) => {
          if (axios.isCancel(thrown)) {
            console.log('Request canceled', thrown.message);
          } else {
            console.log("Error:", thrown.message);
          }
        })
        .finally(() => {
          setLoading(false)
        })
    }, 2000);

  }, 2500), [source]);

해결법

• 함수를 분리하고, useMemo로 처리해주니, 경고가 사라졌습니다.

const getTodos = useCallback(() => {
    setLoading(true);
    setTimeout(() => {
      axios.get('https://jsonplaceholder.typicode.com/todos/1', {
        cancelToken: source.token,
      })
        .then((res) => {
          console.log("res: ", res);
        })
        .catch((thrown) => {
          if (axios.isCancel(thrown)) {
            console.log('Request canceled', thrown.message);
          } else {
            console.log("Error:", thrown.message);
          }
        })
        .finally(() => {
          setLoading(false)
        })
    }, 2000);
  }, [source])

  const handleRequest = useMemo(() => debounce(() => {
    getTodos();
  }, 500), [getTodos]);