Skip to content

Commit

Permalink
[ESLint] Handle optional member chains (#19275)
Browse files Browse the repository at this point in the history 
* 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>
  • Loading branch information
@gaearon @rickhanlonii
gaearon and rickhanlonii committed Jul 7, 2020
1 parent dccf541 commit 7c35cb2
Show file tree
Hide file tree
Showing 2 changed files with 225 additions and 83 deletions.
139 changes: 118 additions & 21 deletions packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1384,17 +1384,16 @@ const tests = {
errors: [
{
message:
// TODO: Ideally this would suggest props.foo?.bar.baz instead.
"React Hook useCallback has a missing dependency: 'props.foo.bar.baz'. " +
"React Hook useCallback has a missing dependency: 'props.foo?.bar.baz'. " +
'Either include it or remove the dependency array.',
suggestions: [
{
desc: 'Update the dependencies array to be: [props.foo.bar.baz]',
desc: 'Update the dependencies array to be: [props.foo?.bar.baz]',
output: normalizeIndent`
function MyComponent(props) {
useCallback(() => {
console.log(props.foo?.bar.baz);
}, [props.foo.bar.baz]);
}, [props.foo?.bar.baz]);
}
`,
},
Expand All @@ -1413,17 +1412,17 @@ const tests = {
errors: [
{
message:
// TODO: Ideally this would suggest props.foo?.bar?.baz instead.
"React Hook useCallback has a missing dependency: 'props.foo.bar.baz'. " +
"React Hook useCallback has a missing dependency: 'props.foo?.bar?.baz'. " +
'Either include it or remove the dependency array.',
suggestions: [
{
desc: 'Update the dependencies array to be: [props.foo.bar.baz]',
desc:
'Update the dependencies array to be: [props.foo?.bar?.baz]',
output: normalizeIndent`
function MyComponent(props) {
useCallback(() => {
console.log(props.foo?.bar?.baz);
}, [props.foo.bar.baz]);
}, [props.foo?.bar?.baz]);
}
`,
},
Expand All @@ -1442,17 +1441,16 @@ const tests = {
errors: [
{
message:
// TODO: Ideally this would suggest props.foo?.bar instead.
"React Hook useCallback has a missing dependency: 'props.foo.bar'. " +
"React Hook useCallback has a missing dependency: 'props.foo?.bar'. " +
'Either include it or remove the dependency array.',
suggestions: [
{
desc: 'Update the dependencies array to be: [props.foo.bar]',
desc: 'Update the dependencies array to be: [props.foo?.bar]',
output: normalizeIndent`
function MyComponent(props) {
useCallback(() => {
console.log(props.foo?.bar.toString());
}, [props.foo.bar]);
}, [props.foo?.bar]);
}
`,
},
Expand Down Expand Up @@ -2045,18 +2043,18 @@ const tests = {
errors: [
{
message:
"React Hook useEffect has a missing dependency: 'history.foo'. " +
"React Hook useEffect has a missing dependency: 'history?.foo'. " +
'Either include it or remove the dependency array.',
suggestions: [
{
desc: 'Update the dependencies array to be: [history.foo]',
desc: 'Update the dependencies array to be: [history?.foo]',
output: normalizeIndent`
function MyComponent({ history }) {
useEffect(() => {
return [
history?.foo
];
}, [history.foo]);
}, [history?.foo]);
}
`,
},
Expand Down Expand Up @@ -6986,7 +6984,6 @@ const testsTypescript = {
],
},
{
// https://github.com/facebook/react/issues/19243
code: normalizeIndent`
function MyComponent() {
const pizza = {};
Expand All @@ -7000,22 +6997,122 @@ const testsTypescript = {
errors: [
{
message:
"React Hook useEffect has missing dependencies: 'pizza.crust' and 'pizza.toppings'. " +
"React Hook useEffect has missing dependencies: 'pizza.crust' and 'pizza?.toppings'. " +
'Either include them or remove the dependency array.',
suggestions: [
{
// TODO the description and suggestions should probably also
// preserve the optional chaining.
desc:
'Update the dependencies array to be: [pizza.crust, pizza.toppings]',
'Update the dependencies array to be: [pizza.crust, pizza?.toppings]',
output: normalizeIndent`
function MyComponent() {
const pizza = {};
useEffect(() => ({
crust: pizza.crust,
toppings: pizza?.toppings,
}), [pizza.crust, pizza.toppings]);
}), [pizza.crust, pizza?.toppings]);
}
`,
},
],
},
],
},
{
code: normalizeIndent`
function MyComponent() {
const pizza = {};
useEffect(() => ({
crust: pizza?.crust,
density: pizza.crust.density,
}), []);
}
`,
errors: [
{
message:
"React Hook useEffect has a missing dependency: 'pizza.crust'. " +
'Either include it or remove the dependency array.',
suggestions: [
{
desc: 'Update the dependencies array to be: [pizza.crust]',
output: normalizeIndent`
function MyComponent() {
const pizza = {};
useEffect(() => ({
crust: pizza?.crust,
density: pizza.crust.density,
}), [pizza.crust]);
}
`,
},
],
},
],
},
{
code: normalizeIndent`
function MyComponent() {
const pizza = {};
useEffect(() => ({
crust: pizza.crust,
density: pizza?.crust.density,
}), []);
}
`,
errors: [
{
message:
"React Hook useEffect has a missing dependency: 'pizza.crust'. " +
'Either include it or remove the dependency array.',
suggestions: [
{
desc: 'Update the dependencies array to be: [pizza.crust]',
output: normalizeIndent`
function MyComponent() {
const pizza = {};
useEffect(() => ({
crust: pizza.crust,
density: pizza?.crust.density,
}), [pizza.crust]);
}
`,
},
],
},
],
},
{
code: normalizeIndent`
function MyComponent() {
const pizza = {};
useEffect(() => ({
crust: pizza?.crust,
density: pizza?.crust.density,
}), []);
}
`,
errors: [
{
message:
"React Hook useEffect has a missing dependency: 'pizza?.crust'. " +
'Either include it or remove the dependency array.',
suggestions: [
{
desc: 'Update the dependencies array to be: [pizza?.crust]',
output: normalizeIndent`
function MyComponent() {
const pizza = {};
useEffect(() => ({
crust: pizza?.crust,
density: pizza?.crust.density,
}), [pizza?.crust]);
}
`,
},
Expand Down

0 comments on commit 7c35cb2

Please sign in to comment.