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

[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;

[ljharb]

cc @Belco90

[Belco90]

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

[Belco90]

@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]

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]

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

[Belco90]

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]

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]

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]

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

[Belco90]

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]

@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 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?