Skip to content

Commit 7c35cb2

Browse files
gaearonrickhanlonii
gaearon
and
rickhanlonii
authored
[ESLint] Handle optional member chains (#19275)
* Rename internal variables This disambiguates "optional"/"required" because that terminology is taken by optional chaining. * Handle optional member chains * Update comment Co-authored-by: Ricky <rickhanlonii@gmail.com> Co-authored-by: Ricky <rickhanlonii@gmail.com>
1 parent dccf541 commit 7c35cb2

2 files changed

Lines changed: 225 additions & 83 deletions

File tree

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

Lines changed: 118 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1384,17 +1384,16 @@ const tests = {
13841384
errors: [
13851385
{
13861386
message:
1387-
// TODO: Ideally this would suggest props.foo?.bar.baz instead.
1388-
"React Hook useCallback has a missing dependency: 'props.foo.bar.baz'. " +
1387+
"React Hook useCallback has a missing dependency: 'props.foo?.bar.baz'. " +
13891388
'Either include it or remove the dependency array.',
13901389
suggestions: [
13911390
{
1392-
desc: 'Update the dependencies array to be: [props.foo.bar.baz]',
1391+
desc: 'Update the dependencies array to be: [props.foo?.bar.baz]',
13931392
output: normalizeIndent`
13941393
function MyComponent(props) {
13951394
useCallback(() => {
13961395
console.log(props.foo?.bar.baz);
1397-
}, [props.foo.bar.baz]);
1396+
}, [props.foo?.bar.baz]);
13981397
}
13991398
`,
14001399
},
@@ -1413,17 +1412,17 @@ const tests = {
14131412
errors: [
14141413
{
14151414
message:
1416-
// TODO: Ideally this would suggest props.foo?.bar?.baz instead.
1417-
"React Hook useCallback has a missing dependency: 'props.foo.bar.baz'. " +
1415+
"React Hook useCallback has a missing dependency: 'props.foo?.bar?.baz'. " +
14181416
'Either include it or remove the dependency array.',
14191417
suggestions: [
14201418
{
1421-
desc: 'Update the dependencies array to be: [props.foo.bar.baz]',
1419+
desc:
1420+
'Update the dependencies array to be: [props.foo?.bar?.baz]',
14221421
output: normalizeIndent`
14231422
function MyComponent(props) {
14241423
useCallback(() => {
14251424
console.log(props.foo?.bar?.baz);
1426-
}, [props.foo.bar.baz]);
1425+
}, [props.foo?.bar?.baz]);
14271426
}
14281427
`,
14291428
},
@@ -1442,17 +1441,16 @@ const tests = {
14421441
errors: [
14431442
{
14441443
message:
1445-
// TODO: Ideally this would suggest props.foo?.bar instead.
1446-
"React Hook useCallback has a missing dependency: 'props.foo.bar'. " +
1444+
"React Hook useCallback has a missing dependency: 'props.foo?.bar'. " +
14471445
'Either include it or remove the dependency array.',
14481446
suggestions: [
14491447
{
1450-
desc: 'Update the dependencies array to be: [props.foo.bar]',
1448+
desc: 'Update the dependencies array to be: [props.foo?.bar]',
14511449
output: normalizeIndent`
14521450
function MyComponent(props) {
14531451
useCallback(() => {
14541452
console.log(props.foo?.bar.toString());
1455-
}, [props.foo.bar]);
1453+
}, [props.foo?.bar]);
14561454
}
14571455
`,
14581456
},
@@ -2045,18 +2043,18 @@ const tests = {
20452043
errors: [
20462044
{
20472045
message:
2048-
"React Hook useEffect has a missing dependency: 'history.foo'. " +
2046+
"React Hook useEffect has a missing dependency: 'history?.foo'. " +
20492047
'Either include it or remove the dependency array.',
20502048
suggestions: [
20512049
{
2052-
desc: 'Update the dependencies array to be: [history.foo]',
2050+
desc: 'Update the dependencies array to be: [history?.foo]',
20532051
output: normalizeIndent`
20542052
function MyComponent({ history }) {
20552053
useEffect(() => {
20562054
return [
20572055
history?.foo
20582056
];
2059-
}, [history.foo]);
2057+
}, [history?.foo]);
20602058
}
20612059
`,
20622060
},
@@ -6986,7 +6984,6 @@ const testsTypescript = {
69866984
],
69876985
},
69886986
{
6989-
// https://github.com/facebook/react/issues/19243
69906987
code: normalizeIndent`
69916988
function MyComponent() {
69926989
const pizza = {};
@@ -7000,22 +6997,122 @@ const testsTypescript = {
70006997
errors: [
70016998
{
70026999
message:
7003-
"React Hook useEffect has missing dependencies: 'pizza.crust' and 'pizza.toppings'. " +
7000+
"React Hook useEffect has missing dependencies: 'pizza.crust' and 'pizza?.toppings'. " +
70047001
'Either include them or remove the dependency array.',
70057002
suggestions: [
70067003
{
7007-
// TODO the description and suggestions should probably also
7008-
// preserve the optional chaining.
70097004
desc:
7010-
'Update the dependencies array to be: [pizza.crust, pizza.toppings]',
7005+
'Update the dependencies array to be: [pizza.crust, pizza?.toppings]',
70117006
output: normalizeIndent`
70127007
function MyComponent() {
70137008
const pizza = {};
70147009
70157010
useEffect(() => ({
70167011
crust: pizza.crust,
70177012
toppings: pizza?.toppings,
7018-
}), [pizza.crust, pizza.toppings]);
7013+
}), [pizza.crust, pizza?.toppings]);
7014+
}
7015+
`,
7016+
},
7017+
],
7018+
},
7019+
],
7020+
},
7021+
{
7022+
code: normalizeIndent`
7023+
function MyComponent() {
7024+
const pizza = {};
7025+
7026+
useEffect(() => ({
7027+
crust: pizza?.crust,
7028+
density: pizza.crust.density,
7029+
}), []);
7030+
}
7031+
`,
7032+
errors: [
7033+
{
7034+
message:
7035+
"React Hook useEffect has a missing dependency: 'pizza.crust'. " +
7036+
'Either include it or remove the dependency array.',
7037+
suggestions: [
7038+
{
7039+
desc: 'Update the dependencies array to be: [pizza.crust]',
7040+
output: normalizeIndent`
7041+
function MyComponent() {
7042+
const pizza = {};
7043+
7044+
useEffect(() => ({
7045+
crust: pizza?.crust,
7046+
density: pizza.crust.density,
7047+
}), [pizza.crust]);
7048+
}
7049+
`,
7050+
},
7051+
],
7052+
},
7053+
],
7054+
},
7055+
{
7056+
code: normalizeIndent`
7057+
function MyComponent() {
7058+
const pizza = {};
7059+
7060+
useEffect(() => ({
7061+
crust: pizza.crust,
7062+
density: pizza?.crust.density,
7063+
}), []);
7064+
}
7065+
`,
7066+
errors: [
7067+
{
7068+
message:
7069+
"React Hook useEffect has a missing dependency: 'pizza.crust'. " +
7070+
'Either include it or remove the dependency array.',
7071+
suggestions: [
7072+
{
7073+
desc: 'Update the dependencies array to be: [pizza.crust]',
7074+
output: normalizeIndent`
7075+
function MyComponent() {
7076+
const pizza = {};
7077+
7078+
useEffect(() => ({
7079+
crust: pizza.crust,
7080+
density: pizza?.crust.density,
7081+
}), [pizza.crust]);
7082+
}
7083+
`,
7084+
},
7085+
],
7086+
},
7087+
],
7088+
},
7089+
{
7090+
code: normalizeIndent`
7091+
function MyComponent() {
7092+
const pizza = {};
7093+
7094+
useEffect(() => ({
7095+
crust: pizza?.crust,
7096+
density: pizza?.crust.density,
7097+
}), []);
7098+
}
7099+
`,
7100+
errors: [
7101+
{
7102+
message:
7103+
"React Hook useEffect has a missing dependency: 'pizza?.crust'. " +
7104+
'Either include it or remove the dependency array.',
7105+
suggestions: [
7106+
{
7107+
desc: 'Update the dependencies array to be: [pizza?.crust]',
7108+
output: normalizeIndent`
7109+
function MyComponent() {
7110+
const pizza = {};
7111+
7112+
useEffect(() => ({
7113+
crust: pizza?.crust,
7114+
density: pizza?.crust.density,
7115+
}), [pizza?.crust]);
70197116
}
70207117
`,
70217118
},

0 commit comments

Comments
 (0)