question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Lint rule for hooks report error for non hook function starting by `useXXX`

See original GitHub issue

Declaring 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.

https://github.com/facebook/react/blob/36a6e29bb3eead85e3500ba7269cbcd55516a8fb/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js#L11-L20

I can make PR for it if you think that this is a good idea.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:5
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

5reactions
mikestopcontinuescommented, Sep 14, 2020

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.

4reactions
gaearoncommented, Dec 18, 2019

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.

There’s also de problem of custom hooks, where that list would not be sufficient to tell hooks from non-hooks apart.

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:

import { useWith as ramdaUseWith, identity } from "ramda";

I know it’s unfortunate but don’t have a better option to offer. (Alternatively you can // eslint-disable-next-line.)

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found