-
Notifications
You must be signed in to change notification settings - Fork 49k
Description
React version: [email protected]
Steps To Reproduce
- Create a functional component with a name such as
ÄndraVärde
that 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.