React: React hook linter fails in a function that is not a hook

Created on 7 Feb 2019  路  4Comments  路  Source: facebook/react

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
Eslint hook plugin is failing when check a file that uses useBasename function from this package: https://www.npmjs.com/package/history

The error is:
error React Hook "useBasename" is called in function "createAppHistory" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:
Just to call any function with use prefix inner a function that is not a React component.

What is the expected behavior?
Should not fails when the function is not a hook

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

"react": "^16.8.0",
"eslint-plugin-react-hooks": "^1.0.0",

Most helpful comment

Thanks for your feedback @nwalters512
And a PR to improve this would be excelent =)

All 4 comments

https://reactjs.org/docs/hooks-faq.html#what-exactly-do-the-lint-rules-enforce states that this is specifically how the lint rule works and acknowledges that this is an imperfect heuristic. It might be good for the lint rule to accept a blacklist of functions to not check, much like the id-length rule allows an exceptions option. I'd be happy to work on a PR for this if this is something the core team would want.

Thanks for your feedback @nwalters512
And a PR to improve this would be excelent =)

It might be good for the lint rule to accept a blacklist of functions to not check ... allows an exceptions option.

That'd be ideal

Have the same problem. I am using ttag translation library that exports useLocale and it fails with:

  55:9  error  React Hook "useLocale" is called in function "localizedRender" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks
Was this page helpful?
0 / 5 - 0 ratings