Skip to content

Commit f95ad03

Browse files
committed
[eslint-plugin-react-hooks] update naming rules to disallow _component
1 parent cfee9e6 commit f95ad03

File tree

3 files changed

+24
-19
lines changed

3 files changed

+24
-19
lines changed

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
## Next Release
2+
3+
* **New Violations:** Component names now need to start with an uppercase letter. `_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

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -406,17 +406,6 @@ const tests = {
406406
const [myState, setMyState] = useState(null);
407407
}
408408
`,
409-
`
410-
// Valid, but should be invalid. '_useHook' is currently recognized as a component.
411-
function Component(props) {
412-
if (cond) {
413-
_useHook();
414-
}
415-
}
416-
function _useHook() {
417-
useState(null);
418-
}
419-
`,
420409
],
421410
invalid: [
422411
{
@@ -652,6 +641,21 @@ const tests = {
652641
functionError('useHookInsideNormalFunction', 'normalFunctionWithHook'),
653642
],
654643
},
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+
},
655659
{
656660
code: `
657661
// Invalid because it's dangerous and might not warn otherwise.

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

Lines changed: 3 additions & 8 deletions
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)