[eslint-plugin-react-hooks] useWithoutEffectSuffix fix (#18902) (#18907)
* [eslint-plugin-react-hooks] reproduce bug with a test and fix it (#18902) Since we only reserve `-Effect` suffix, react-hooks/exhaustive-deps is expected to succeed without warning on a custom hook which contains -Effect- in the middle of it's name (but does NOT contain it as a suffix). * [eslint-plugin-react-hooks] reproduced bug with a test and fix it Since we only reserve `-Effect` suffix, react-hooks/exhaustive-deps is expected to succeed without warning on a render helper which contains -use- in the middle of it's name (but does NOT contain it as a prefix, since that would violate hook naming convetion). Co-authored-by: Boris Sergeyev <boris.sergeyev@quolab.com>
Boris Sergeev committed
May 13, 2020 at 17:44 UTC
487c693846dbe58a68a410c658699d27386323b3
2 files changed
+19
-1
packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
+18
@@ -405,6 +405,24 @@ const tests = {
405
}
406
`,
407
},
408
+ {
409
+ code: normalizeIndent`
410
+ function MyComponent(props) {
411
+ useWithoutEffectSuffix(() => {
412
+ console.log(props.foo);
413
+ }, []);
414
+ }
415
+ `,
416
+ },
417
+ {
418
+ code: normalizeIndent`
419
+ function MyComponent(props) {
420
+ return renderHelperConfusedWithEffect(() => {
421
+ console.log(props.foo);
422
+ }, []);
423
+ }
424
+ `,
425
+ },
426
{
427
// Valid because we don't care about hooks outside of components.
428
code: normalizeIndent`
packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
+1
-1
@@ -1510,7 +1510,7 @@ function getReactiveHookCallbackIndex(calleeNode, options) {
1510
// useImperativeHandle(ref, fn)
1511
return 1;
1512
default:
1513
- if (node === calleeNode && node.name.match(/use.+Effect/)) {
1513
+ if (node === calleeNode && node.name.match(/^use.+Effect$/)) {
1514
return 0;
1515
} else if (node === calleeNode && options && options.additionalHooks) {
1516
// Allow the user to provide a regular expression which enables the lint to