profile
viewpoint

Ask questions[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.

facebook/react

Answer questions 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],
    );
useful!
source:https://uonfu.com/
Github User Rank List