Enforce deps array in useMemo and useCallback (#15025)
Dan Abramov committed
Mar 6, 2019 at 18:17 UTC
5d49dafac80733fbd8699138c766da3339468254
2 files changed
+42
packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
+30
@@ -178,6 +178,16 @@ const tests = {
178
}
179
`,
180
},
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
+ },
191
{
192
code: `
193
function MyComponent(props) {
@@ -924,6 +934,26 @@ const tests = {
934
'Either include it or remove the dependency array.',
935
],
936
},
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
+ },
957
{
958
// Regression test
959
code: `
packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
+12
@@ -87,6 +87,18 @@ export default {
87
const depsIndex = callbackIndex + 1;
88
const declaredDependenciesNode = node.parent.arguments[depsIndex];
89
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
+ }
102
return;
103
}
104