Skip to content

False positive for react/jsx-no-leaked-render #3292

Open
@Robloche

Description

@Robloche

Following code triggers react/jsx-no-leaked-render although it's perfectly valid:

return <MyReactComponent
          isDisabled={foo && bar === 0}
          onClick={handleOnClick} />;

with:

foo: boolean;
bar: number;

Activity

ljharb

ljharb commented on May 20, 2022

@ljharb
Member
Belco90

Belco90 commented on May 20, 2022

@Belco90
Contributor

@ljharb thanks for pinging! I can take care of this, feel free to assign it to me.

Belco90

Belco90 commented on May 20, 2022

@Belco90
Contributor

@Robloche regarding the false positive reported: I think sometimes you would be interested into having this rule applied to props also, like:

<MyReactComponent
  header={someNumber && <Header />}
  isDisabled={foo && bar === 0}
/>

So I think the proper fix for this would be to make sure the right side of the && operator is not a condition.

Robloche

Robloche commented on May 20, 2022

@Robloche
Author

Agreed. So what's you recommendation?

As for now, I simply rewrote my code, adding a local isDisabled boolean.
And since this makes the code clearer, I guess it's a good solution.

ljharb

ljharb commented on May 20, 2022

@ljharb
Member

The right side should be able to be any value that’s safe to render, which includes booleans.

Belco90

Belco90 commented on May 20, 2022

@Belco90
Contributor

The right side should be able to be any value that’s safe to render, which includes booleans.

That's true, but now I don't know what to do with this false positive since I can't figure the types of the operators. Any suggestions?

ljharb

ljharb commented on May 20, 2022

@ljharb
Member

The RHS is an === comparison; it can’t ever be anything but a boolean. You don’t need to know any types to figure that part out.

Belco90

Belco90 commented on May 21, 2022

@Belco90
Contributor

The RHS is an === comparison; it can’t ever be anything but a boolean. You don’t need to know any types to figure that part out.

Exactly, so since the RHS is something renderable, this rule should complain about it since we don't know the type for the LHS (it could be a zero, so the rule reported it as expected).

I was suggesting to report props only when there is a && operator and the RHS is a component so we can assume you want to pass that prop to render something, rather than just use the value for logic purposes.

Robloche

Robloche commented on May 23, 2022

@Robloche
Author

Yes, I'm aligned with your suggestion. That should do the trick.

Belco90

Belco90 commented on May 23, 2022

@Belco90
Contributor

This could be even fixed by introducing a new option: reportProps. It could receive the following values:

  • "always": as it is now
  • "components": when the RHS is a component, as suggested
  • "never": so no props are reported
ljharb

ljharb commented on May 24, 2022

@ljharb
Member

@Belco90 in this example tho, foo is a boolean since it's using the TS parser - so the rule should be able to know that the entire prop is only a boolean.

Belco90

Belco90 commented on May 24, 2022

@Belco90
Contributor

@Belco90 in this example tho, foo is a boolean since it's using the TS parser - so the rule should be able to know that the entire prop is only a boolean.

Is it? If so, it's ok for that case. What about the cases described before?

51 remaining items

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions

    False positive for react/jsx-no-leaked-render · Issue #3292 · jsx-eslint/eslint-plugin-react