-
Notifications
You must be signed in to change notification settings - Fork 49.8k
Description
React version: [email protected]
Steps To Reproduce
- Create a functional component with a name such as
ÄndraVärdethat starts with a non english upper case letter - Run the linter
The current behavior
Sample error:
23:20 error React Hook "useSelectedState" is called in function "ÄndraVärde" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" react-hooks/rules-of-hooks
The expected behavior
The linting should allow non english component names, React does.
The problem
Version 5.0.0 included the changes made in #25162 which modified the following method:
react/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js
Lines 43 to 50 in e137890
| /** | |
| * Checks if the node is a React component name. React component names must | |
| * always start with an uppercase letter. | |
| */ | |
| function isComponentName(node) { | |
| return node.type === 'Identifier' && /^[A-Z]/.test(node.name); | |
| } |
This code only allows english upper case letters A-Z which is not enough.
Proposed solution
Use .toUpperCase() and compare the result:
function isComponentName(node) {
return node.type === 'Identifier' && node.name[0] == node.name[0].toUpperCase();
} This should work with a lot more languages at least.