Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

check used state when using ternary assignment #2014

Closed
wants to merge 1 commit into from
Closed

check used state when using ternary assignment #2014

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions lib/rules/no-unused-state.js
View file
Open in desktop
Expand Up @@ -170,6 +170,11 @@ module.exports = {
// Used to record used state fields and new aliases for both
// AssignmentExpressions and VariableDeclarators.
function handleAssignment(left, right) {
if (right.type === 'ConditionalExpression') {
handleAssignment(left, right.consequent);
handleAssignment(left, right.alternate);
return;
}
switch (left.type) {
case 'Identifier':
if (isStateReference(right) && classInfo.aliases) {
Expand Down
9 changes: 9 additions & 0 deletions tests/lib/rules/no-unused-state.js
View file
Open in desktop
Expand Up @@ -257,6 +257,15 @@ eslintTester.run('no-unused-state', rule, {
return <SomeComponent foo={foo} />;
}
}`,
`class ShorthandDestructuringWithTernaryOperatorTest extends React.Component {
constructor() {
this.state = { foo: 0 };
}
render() {
const {foo} = true ? this.state : {};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this should be considered used in the general case - with true, obviously, the entire ternary reduces to const { foo } = this.state; - but if the condition isn't "always true", then the state is unused in some cases, so it's appropriate for the rule to warn about it.

You should be unconditionally destructuring out of state.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I retype the same condition as
if (condition) { const { foo } = this.state; }
the linter would accept this;
but if I type:
const {foo} = condition? this.state : {};
I will get unused field state, although the two are the same and the state field is unused if the condition is falsy.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would expect both to be considered unused. Let’s fix that bug instead.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, I don't agree with that, I don't consider this as bug, there are punch of cases where you need to conditionally get field from state.
IMO the linting rule applies on static analysis of code, so is a field will be sometimes used based on dynamic conditions, it should be considered as used.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can't think of any - you should always be unconditionally extracting from state, and then conditionally using those values.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

compare this

you should always be unconditionally extracting from state, and then conditionally using those values.

const { foo } = this.state;
if(condition) {
 // use foo
}

with

if(condition) {
const { foo } = this.state;
 // use foo
}

you first comment still applies for both cases.

but if the condition isn't "always true", then the state is unused in some cases, so it's appropriate for the rule to warn about it.

but, in the first form when condition is false, I created a variable (foo) although I might not use it at all, I think the second approach would be better for resources.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Performance is the least important concern; creating variables is free; and the cost of a single property get is effectively free as well.

return <SomeComponent bar={foo} />;
}
}`,
`class AliasDeclarationTest extends React.Component {
constructor() {
this.state = { foo: 0 };
Expand Down