[ESLint] Fix a bug causing a too coarse dependency suggestion (#19313)
* Add regression test for ESLint rule * Fix the issue
Dan Abramov committed
Jul 10, 2020 at 19:02 UTC
47915fd6e1858e8d3434caff9588237448a00b3f
2 files changed
+99
-1
packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
+97
@@ -1343,6 +1343,39 @@ const tests = {
1343
}
1344
`,
1345
},
1346
+ // Regression test.
1347
+ {
1348
+ code: normalizeIndent`
1349
+ function Example(props) {
1350
+ useEffect(() => {
1351
+ let topHeight = 0;
1352
+ topHeight = props.upperViewHeight;
1353
+ }, [props.upperViewHeight]);
1354
+ }
1355
+ `,
1356
+ },
1357
+ // Regression test.
1358
+ {
1359
+ code: normalizeIndent`
1360
+ function Example(props) {
1361
+ useEffect(() => {
1362
+ let topHeight = 0;
1363
+ topHeight = props?.upperViewHeight;
1364
+ }, [props?.upperViewHeight]);
1365
+ }
1366
+ `,
1367
+ },
1368
+ // Regression test.
1369
+ {
1370
+ code: normalizeIndent`
1371
+ function Example(props) {
1372
+ useEffect(() => {
1373
+ let topHeight = 0;
1374
+ topHeight = props?.upperViewHeight;
1375
+ }, [props]);
1376
+ }
1377
+ `,
1378
+ },
1379
],
1380
invalid: [
1381
{
@@ -7120,6 +7153,70 @@ const testsTypescript = {
7153
},
7154
],
7155
},
7156
+ // Regression test.
7157
+ {
7158
+ code: normalizeIndent`
7159
+ function Example(props) {
7160
+ useEffect(() => {
7161
+ let topHeight = 0;
7162
+ topHeight = props.upperViewHeight;
7163
+ }, []);
7164
+ }
7165
+ `,
7166
+ errors: [
7167
+ {
7168
+ message:
7169
+ "React Hook useEffect has a missing dependency: 'props.upperViewHeight'. " +
7170
+ 'Either include it or remove the dependency array.',
7171
+ suggestions: [
7172
+ {
7173
+ desc:
7174
+ 'Update the dependencies array to be: [props.upperViewHeight]',
7175
+ output: normalizeIndent`
7176
+ function Example(props) {
7177
+ useEffect(() => {
7178
+ let topHeight = 0;
7179
+ topHeight = props.upperViewHeight;
7180
+ }, [props.upperViewHeight]);
7181
+ }
7182
+ `,
7183
+ },
7184
+ ],
7185
+ },
7186
+ ],
7187
+ },
7188
+ // Regression test.
7189
+ {
7190
+ code: normalizeIndent`
7191
+ function Example(props) {
7192
+ useEffect(() => {
7193
+ let topHeight = 0;
7194
+ topHeight = props?.upperViewHeight;
7195
+ }, []);
7196
+ }
7197
+ `,
7198
+ errors: [
7199
+ {
7200
+ message:
7201
+ "React Hook useEffect has a missing dependency: 'props?.upperViewHeight'. " +
7202
+ 'Either include it or remove the dependency array.',
7203
+ suggestions: [
7204
+ {
7205
+ desc:
7206
+ 'Update the dependencies array to be: [props?.upperViewHeight]',
7207
+ output: normalizeIndent`
7208
+ function Example(props) {
7209
+ useEffect(() => {
7210
+ let topHeight = 0;
7211
+ topHeight = props?.upperViewHeight;
7212
+ }, [props?.upperViewHeight]);
7213
+ }
7214
+ `,
7215
+ },
7216
+ ],
7217
+ },
7218
+ ],
7219
+ },
7220
],
7221
};
7222
packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
+2
-1
@@ -1478,7 +1478,8 @@ function getDependency(node) {
1478
// Note: we don't check OptionalMemberExpression because it can't be LHS.
1479
node.type === 'MemberExpression' &&
1480
node.parent &&
1481
- node.parent.type === 'AssignmentExpression'
1481
+ node.parent.type === 'AssignmentExpression' &&
1482
+ node.parent.left === node
1483
) {
1484
return node.object;
1485
} else {