[eslint-plugin-react-hooks] react-hooks/exhaustive-deps throws lint error `Pass an inline function` for valid scenarios

Running lint rule react-hooks/exhaustive-deps Throws an error for cases where we use lodash methods such _throttle or debounce inside useCallback . Refactoring them would make useCallback becomes useless as the cache will be invalidated every time.

error  React Hook useCallback received a function whose dependencies are unknown. Pass an inline function instead  react-hooks/exhaustive-deps

React version: 16.13.1 eslint-plugin-react-hooks version 4.0.0

Steps To Reproduce

1. Upgrade eslint-plugin-react-hooks to version 4.0.0
2. Add lint rule to your eslinerc file ‘react-hooks/exhaustive-deps’: ‘error’,
3. Run it on the following snippet.

code example:

     const throttledMethod = React.useCallback(
        _.throttle(abc, 500 ),
        [abc],
    );

The current behavior

Throws error because it expects an inline function

error  React Hook useCallback received a function whose dependencies are unknown. Pass an inline function instead  react-hooks/exhaustive-deps

The expected behavior

This is a valid scenario, should not throw error as if you refactor it, useCallback becomes useless as the cache will be invalidated every time.

[vkurchatkin]

useCallback is specifically designed for inline functions. For cases like this you need to use useMemo:

 const throttledMethod = React.useMemo(
        () => _.throttle(abc, 500 ),
        [abc],
    );

[XiaoJiuDYS]

This will not report an error, what is the difference about useMemo and useCallBack in this scenario？

 const throttledMethod = React.useCallBack(
        () => _.throttle(abc, 500 ),
        [abc],
    );