Fix ESLint crash on empty react effect hook (#20385)
* Fix ESLint crash on empty react effect hook * Add layout effect to test * Improve wording in comment * Improve lint warning wording * Reword missing effect callback message
Christian Ruigrok committed
Jan 11, 2021 at 21:18 UTC
e8eff119e036485b74b2acb6f57045390703f6fb
2 files changed
+49
packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
+36
@@ -1692,6 +1692,42 @@ const tests = {
1692
},
1693
],
1694
},
1695
+ {
1696
+ code: normalizeIndent`
1697
+ function MyComponent() {
1698
+ useEffect()
1699
+ useLayoutEffect()
1700
+ useCallback()
1701
+ useMemo()
1702
+ }
1703
+ `,
1704
+ errors: [
1705
+ {
1706
+ message:
1707
+ 'React Hook useEffect requires an effect callback. ' +
1708
+ 'Did you forget to pass a callback to the hook?',
1709
+ suggestions: undefined,
1710
+ },
1711
+ {
1712
+ message:
1713
+ 'React Hook useLayoutEffect requires an effect callback. ' +
1714
+ 'Did you forget to pass a callback to the hook?',
1715
+ suggestions: undefined,
1716
+ },
1717
+ {
1718
+ message:
1719
+ 'React Hook useCallback requires an effect callback. ' +
1720
+ 'Did you forget to pass a callback to the hook?',
1721
+ suggestions: undefined,
1722
+ },
1723
+ {
1724
+ message:
1725
+ 'React Hook useMemo requires an effect callback. ' +
1726
+ 'Did you forget to pass a callback to the hook?',
1727
+ suggestions: undefined,
1728
+ },
1729
+ ],
1730
+ },
1731
{
1732
// Regression test
1733
code: normalizeIndent`
packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
+13
@@ -1119,6 +1119,19 @@ export default {
1119
const declaredDependenciesNode = node.arguments[callbackIndex + 1];
1120
const isEffect = /Effect($|[^a-z])/g.test(reactiveHookName);
1121
1122
+ // Check whether a callback is supplied. If there is no callback supplied
1123
+ // then the hook will not work and React will throw a TypeError.
1124
+ // So no need to check for dependency inclusion.
1125
+ if (!callback) {
1126
+ reportProblem({
1127
+ node: reactiveHook,
1128
+ message:
1129
+ `React Hook ${reactiveHookName} requires an effect callback. ` +
1130
+ `Did you forget to pass a callback to the hook?`,
1131
+ });
1132
+ return;
1133
+ }
1134
+
1135
// Check the declared dependencies for this reactive hook. If there is no
1136
// second argument then the reactive callback will re-run on every render.
1137
// So no need to check for dependency inclusion.