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.

[eslint-plugin-react-hooks] "Rules of hooks" considers any function beginning with "use" to be a React Hook

See original GitHub issue

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

This seems like a bug.

What is the current behavior?

  1. Follow the steps for adding the linting rules outlined on the Rules of Hooks page.
  2. Create a plain JS function with a name that begins with use, e.g. useFoo. Call this function from within another plain JS function, e.g. testFoo.
    function useFoo() {
    }
    
    function testFoo() {
      useFoo();
    }
    
  3. The linter will complain:
    React Hook "useFoo" is called in function "testFoo" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks
    

What is the expected behavior?

Ideally, the rule would ignore functions that begin with use but are not React Hooks.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:11 (2 by maintainers)

github_iconTop GitHub Comments

8reactions
micha149commented, Apr 25, 2019

@gaearon whats up with other functions beginning with use? For example ramdas useWith… Maybe the rule should check if any of the problematic functions like useState, useEffect etc. is used inside my hook, otherwise the checks can be handled differently.

Otherwise something like a whitelist of functions which are not hooks might be useful as a configuration parameter.

1reaction
cjcenizalcommented, Jul 17, 2020

@jtiscione I understand you’re upset and this rule is causing problems for you. At the same time, remember you’re using open-source software. You’re not paying for it and the maintainers of this tool don’t owe you anything. You’ll get farther along if you give yourself time to cool down before posting a complaint about OSS.

When you do post a complaint, you’ll maximize your chances of getting what you want by avoiding incendiary language like “absolutely unacceptable”, “screaming”, “atrocious”, “carelessly”, and “doesn’t understand”. I’ve found that it helps to clearly describe the problem I’m encountering and propose some solutions or ask questions to understand the problem space better.

How you communicate establishes your own reputation, for better or worse!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Rules of Hooks - React
Don't call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any...
Read more >
eslint-plugin-react-hooks - npm
eslint -plugin-react-hooks. This ESLint plugin enforces the Rules of Hooks. It is a part of the Hooks API for React.
Read more >
Why eslint-plugin-react-hooks doesn't warn when using react ...
If I use hooks conditionally in custom hooks, there will be a warning like this: "React Hook \"useState\" is called conditionally. React Hooks...
Read more >
12 essential ESLint rules for React - LogRocket Blog
React Hooks rules ( eslint-plugin-react-hooks ) ... Hooks should only be called from either a function component, or another Hook.
Read more >
eslint-plugin-react-hooks | Yarn - Package Manager
ESLint rules for React Hooks. eslint, eslint-plugin ... React is a JavaScript library for building user interfaces. Declarative: React makes it painless to ......
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