Skip to content

Commit 2c2d9a1

Browse files
authored
[eslint-plugin-react-hooks] only allow capitalized component names (#25162)
- update naming rules to disallow _component - update eslint-plugin-react-hooks version
1 parent 36c908a commit 2c2d9a1

File tree

5 files changed

+26
-10
lines changed

5 files changed

+26
-10
lines changed

ReactVersions.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const ReactVersion = '18.3.0';
2525
const nextChannelLabel = 'next';
2626

2727
const stablePackages = {
28-
'eslint-plugin-react-hooks': '4.7.0',
28+
'eslint-plugin-react-hooks': '5.0.0',
2929
'jest-react': '0.15.0',
3030
react: ReactVersion,
3131
'react-art': ReactVersion,

packages/eslint-plugin-react-hooks/CHANGELOG.md

+6
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
## 5.0.0 (next release)
2+
3+
* **New Violations:** Component names now need to start with an uppercase letter instead of a non-lowercase letter. This means `_Button` or `_component` are no longer valid. ([@kassens](https://github.com/kassens)) in [#25162](https://github.com/facebook/react/pull/25162)
4+
5+
## 4.6.0
6+
17
## 4.5.0
28

39
* Fix false positive error with large number of branches. ([@scyron6](https://github.com/scyron6) in [#24287](https://github.com/facebook/react/pull/24287))

packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js

+15
Original file line numberDiff line numberDiff line change
@@ -641,6 +641,21 @@ const tests = {
641641
functionError('useHookInsideNormalFunction', 'normalFunctionWithHook'),
642642
],
643643
},
644+
{
645+
code: `
646+
// These are neither functions nor hooks.
647+
function _normalFunctionWithHook() {
648+
useHookInsideNormalFunction();
649+
}
650+
function _useNotAHook() {
651+
useHookInsideNormalFunction();
652+
}
653+
`,
654+
errors: [
655+
functionError('useHookInsideNormalFunction', '_normalFunctionWithHook'),
656+
functionError('useHookInsideNormalFunction', '_useNotAHook'),
657+
],
658+
},
644659
{
645660
code: `
646661
// Invalid because it's dangerous and might not warn otherwise.

packages/eslint-plugin-react-hooks/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "eslint-plugin-react-hooks",
33
"description": "ESLint rules for React Hooks",
4-
"version": "4.6.0",
4+
"version": "5.0.0",
55
"repository": {
66
"type": "git",
77
"url": "https://github.com/facebook/react.git",

packages/eslint-plugin-react-hooks/src/RulesOfHooks.js

+3-8
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
*/
1717

1818
function isHookName(s) {
19-
return /^use[A-Z0-9].*$/.test(s);
19+
return /^use[A-Z0-9]/.test(s);
2020
}
2121

2222
/**
@@ -42,16 +42,11 @@ function isHook(node) {
4242

4343
/**
4444
* Checks if the node is a React component name. React component names must
45-
* always start with a non-lowercase letter. So `MyComponent` or `_MyComponent`
46-
* are valid component names for instance.
45+
* always start with an uppercase letter.
4746
*/
4847

4948
function isComponentName(node) {
50-
if (node.type === 'Identifier') {
51-
return !/^[a-z]/.test(node.name);
52-
} else {
53-
return false;
54-
}
49+
return node.type === 'Identifier' && /^[A-Z]/.test(node.name);
5550
}
5651

5752
function isReactFunction(node, functionName) {

0 commit comments

Comments
 (0)