Lint rule for hooks report error for non hook function starting by `useXXX`
See original GitHub issueDeclaring non-hook function like:
import { useWith, identity } from "ramda";
const test = useWith(Math.pow, [identity, identity]);
causes
React Hook "useWith" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function.eslint(react-hooks/rules-of-hooks)
I’m using latest version of eslint-plugin-react-hooks 2.3.0
It would be useful to have settings to override this regexp.
I can make PR for it if you think that this is a good idea.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:5
- Comments:5 (1 by maintainers)
Top Results From Across the Web
React Native !!! Error: Invalid hook call. Hooks can only be ...
The error is pretty straight forward. You have a class extending React.Component, and you define a state in the constructor, why would you ......
Read more >React I love you, but you're bringing me down - Hacker News
Absolutely correct. I stand corrected. There is also a lint rule (the program I was refering to) to check that hooks are not...
Read more >8 common React error messages and how to address them
React Hook has a missing dependency: 'XXX'. Either include it or remove the dependency array.
Read more >react disable onclick conditional - You.com | The AI Search ...
rules -of-hooks recognizes that listenToTheme is invariant in the hook. Invariant conditions do not trigger called conditionally . exhaustive-deps reports ...
Read more >ChangeLog-SLE-15-SP3-GM-SLE-15-SP4-Snapshot ... - SUSE
This is needed for toolkits that do not report keystrokes to atk, ... jq package * Cirrus: Fix lint + validation using wrong...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
How about rule config
{ignores: [...patterns]}
so that users can customize what they’d like to ignore. Doesn’t seem fair to litter code with disable comments, especially when users are only likely to have a few functions they need ignored—and always every time they use them.Hooks rules rely on this convention, including for custom Hooks. We can’t guess their names so we needed to squat some prefix that can reasonably be considered unique to Hooks. We tried to pick something that is both short enough and isn’t used in the ecosystem widely at the same time. Unfortunately, there are a few false positive for
use
now, and this sucks for libraries that rely on it. But the whole Hooks convention falls apart if we can’t reliably distinguish them at the build time. So a clash like this is the cost.That is not just an additional problem — it is the reason for the convention. Validating known ones is insufficient for the rule to work at scale.
Arguably now that Hooks are commonplace, even without the linter, seeing
use
outside a component makes you wonder — is this a Hook? Is this a violation? So while it’s unfortunate for other libraries, I think we can accept by now that within React ecosystem,use
prefix has a semantic meaning now. As a workaround and to clarify the intent, you can do:I know it’s unfortunate but don’t have a better option to offer. (Alternatively you can
// eslint-disable-next-line
.)