Skip to content

Commit 5d49daf

Browse files
authored
Enforce deps array in useMemo and useCallback (#15025)
1 parent a9aa24e commit 5d49daf

File tree

2 files changed

+42
-0
lines changed

2 files changed

+42
-0
lines changed

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

+30
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,16 @@ const tests = {
178178
}
179179
`,
180180
},
181+
{
182+
// Valid because they have meaning without deps.
183+
code: `
184+
function MyComponent(props) {
185+
useEffect(() => {});
186+
useLayoutEffect(() => {});
187+
useImperativeHandle(props.innerRef, () => {});
188+
}
189+
`,
190+
},
181191
{
182192
code: `
183193
function MyComponent(props) {
@@ -924,6 +934,26 @@ const tests = {
924934
'Either include it or remove the dependency array.',
925935
],
926936
},
937+
{
938+
// Invalid because they don't have a meaning without deps.
939+
code: `
940+
function MyComponent(props) {
941+
const value = useMemo(() => { return 2*2; });
942+
const fn = useCallback(() => { alert('foo'); });
943+
}
944+
`,
945+
// We don't know what you meant.
946+
output: `
947+
function MyComponent(props) {
948+
const value = useMemo(() => { return 2*2; });
949+
const fn = useCallback(() => { alert('foo'); });
950+
}
951+
`,
952+
errors: [
953+
"React Hook useMemo doesn't serve any purpose without a dependency array as a second argument.",
954+
"React Hook useCallback doesn't serve any purpose without a dependency array as a second argument.",
955+
],
956+
},
927957
{
928958
// Regression test
929959
code: `

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

+12
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,18 @@ export default {
8787
const depsIndex = callbackIndex + 1;
8888
const declaredDependenciesNode = node.parent.arguments[depsIndex];
8989
if (!declaredDependenciesNode) {
90+
// These are only used for optimization.
91+
if (
92+
reactiveHookName === 'useMemo' ||
93+
reactiveHookName === 'useCallback'
94+
) {
95+
context.report({
96+
node: node,
97+
message:
98+
`React Hook ${reactiveHookName} doesn't serve any purpose ` +
99+
`without a dependency array as a second argument.`,
100+
});
101+
}
90102
return;
91103
}
92104

0 commit comments

Comments
 (0)