codesandbox / codesandbox/codesandbox-client
Eslint throws error in vanillajs for variable that have the same name as react hooks
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 13.6k
- Forks
- 2.4k
- Avg merge
- 6d 19h
- Merged PRs (30d)
- 2
Description
🐛 bug report
Preflight Checklist
- [x ] I have read the Contributing Guidelines for this project.
- [ x] I agree to follow the Code of Conduct that this project
adheres to. - [ x] I have searched the issue tracker for an issue that matches the one I want
to file, without success.
Description of the problem
Eslint throw error for variable names that are the same as React namespaces in a vanilla js project.
For example.

I have a vanilla project and can't use the name 'useState' for a variable because I can't declare react hooks at a top level. I recieved this error
React Hook "useState" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function. (react-hooks/rules-of-hooks)eslint
How has this issue affected you? What are you trying to accomplish?
i'm trying to just play with code, not using react
To Reproduce
create a vanilla js project. in index.js create a function called useState. Try to call that function. Recieve eslint error.
Link to sandbox: link
Your Environment
| Software | Name/Version |
|---|---|
| Сodesandbox | most recent as of 10/26/2022 |
| Browser | Chrome |
| Operating System | MacOS |
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the report in the linked CodeSandbox, using src/index.js and the shown react-hooks/rules-of-hooks error. Inspect how ESLint is applied to a vanilla JavaScript project and determine whether a variable or function named useState is incorrectly treated as a React Hook. Done means the vanilla example no longer produces the false-positive error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- eslint, javascript
- Domain
- tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100