[eslint-plugin-react-hooks] only allow capitalized component names (#25162)
- update naming rules to disallow _component - update eslint-plugin-react-hooks version
Jan Kassens committed
Sep 1, 2022 at 10:07 UTC
2c2d9a1df03f04d7aa7b37ec48d4e1e22b475dd8
5 files changed
+26
-10
ReactVersions.js
+1
-1
@@ -25,7 +25,7 @@ const ReactVersion = '18.3.0';
25
const nextChannelLabel = 'next';
26
27
const stablePackages = {
28
- 'eslint-plugin-react-hooks': '4.7.0',
28
+ 'eslint-plugin-react-hooks': '5.0.0',
29
'jest-react': '0.15.0',
30
react: ReactVersion,
31
'react-art': ReactVersion,
packages/eslint-plugin-react-hooks/CHANGELOG.md
+6
@@ -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
+
7
## 4.5.0
8
9
* 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
@@ -641,6 +641,21 @@ const tests = {
641
functionError('useHookInsideNormalFunction', 'normalFunctionWithHook'),
642
],
643
},
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
+ },
659
{
660
code: `
661
// Invalid because it's dangerous and might not warn otherwise.
packages/eslint-plugin-react-hooks/package.json
+1
-1
@@ -1,7 +1,7 @@
1
{
2
"name": "eslint-plugin-react-hooks",
3
"description": "ESLint rules for React Hooks",
4
- "version": "4.6.0",
4
+ "version": "5.0.0",
5
"repository": {
6
"type": "git",
7
"url": "https://github.com/facebook/react.git",
packages/eslint-plugin-react-hooks/src/RulesOfHooks.js
+3
-8
@@ -16,7 +16,7 @@
16
*/
17
18
function isHookName(s) {
19
- return /^use[A-Z0-9].*$/.test(s);
19
+ return /^use[A-Z0-9]/.test(s);
20
}
21
22
/**
@@ -42,16 +42,11 @@ function isHook(node) {
42
43
/**
44
* 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.
46
*/
47
48
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);
50
}
51
52
function isReactFunction(node, functionName) {