Skip to content

Commit e8eff11

Browse files
authored
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
1 parent 2765955 commit e8eff11

File tree

2 files changed

+49
-0
lines changed

2 files changed

+49
-0
lines changed

Diff for: packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js

+36
Original file line numberDiff line numberDiff line change
@@ -1692,6 +1692,42 @@ const tests = {
16921692
},
16931693
],
16941694
},
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+
},
16951731
{
16961732
// Regression test
16971733
code: normalizeIndent`

Diff for: packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js

+13
Original file line numberDiff line numberDiff line change
@@ -1119,6 +1119,19 @@ export default {
11191119
const declaredDependenciesNode = node.arguments[callbackIndex + 1];
11201120
const isEffect = /Effect($|[^a-z])/g.test(reactiveHookName);
11211121

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+
11221135
// Check the declared dependencies for this reactive hook. If there is no
11231136
// second argument then the reactive callback will re-run on every render.
11241137
// So no need to check for dependency inclusion.

0 commit comments

Comments
 (0)