0} />;
+ │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ 70 │ };
+ 71 │
+
+ i JavaScript's && operator returns the left value when it's falsy (e.g., 0, NaN, ''). React will render that value, causing unexpected UI output.
+
+ i Make sure the condition is explicitly boolean.Use !!value, value > 0, or a ternary expression.
+
+
+```
+
+```
+invalid.jsx:73:15 lint/nursery/noLeakedRender ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+ i Potential leaked value that might cause unintended rendering.
+
+ 72 │ const Component8 = ({ count, title }) => {
+ > 73 │ return {(((((count))))) && ((title))}
;
+ │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ 74 │ };
+ 75 │
+
+ i JavaScript's && operator returns the left value when it's falsy (e.g., 0, NaN, ''). React will render that value, causing unexpected UI output.
+
+ i Make sure the condition is explicitly boolean.Use !!value, value > 0, or a ternary expression.
+
+
+```
+
+```
+invalid.jsx:77:16 lint/nursery/noLeakedRender ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+ i Potential leaked value that might cause unintended rendering.
+
+ 76 │ const Component9 = ({ data }) => {
+ > 77 │ return {(((((data)))) && (((((data.value))))))}
;
+ │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ 78 │ };
+ 79 │
+
+ i JavaScript's && operator returns the left value when it's falsy (e.g., 0, NaN, ''). React will render that value, causing unexpected UI output.
+
+ i Make sure the condition is explicitly boolean.Use !!value, value > 0, or a ternary expression.
+
+
+```
+
+```
+invalid.jsx:81:15 lint/nursery/noLeakedRender ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+ i Potential leaked value that might cause unintended rendering.
+
+ 80 │ const Component = ({ value }) => {
+ > 81 │ return {(((value))) &&
;
+ │ ^^^^^^^^^^^^^^^^^^^^^^^
+ 82 │ };
+ 83 │
+
+ i JavaScript's && operator returns the left value when it's falsy (e.g., 0, NaN, ''). React will render that value, causing unexpected UI output.
+
+ i Make sure the condition is explicitly boolean.Use !!value, value > 0, or a ternary expression.
+
+
+```
diff --git a/crates/biome_js_analyze/tests/specs/nursery/noLeakedRender/valid.jsx b/crates/biome_js_analyze/tests/specs/nursery/noLeakedRender/valid.jsx
new file mode 100644
index 000000000000..8f8c6fbf5eb9
--- /dev/null
+++ b/crates/biome_js_analyze/tests/specs/nursery/noLeakedRender/valid.jsx
@@ -0,0 +1,74 @@
+// /* should not generate diagnostics */
+const Component1 = () => {
+ return {customTitle || defaultTitle}
;
+};
+
+const Component2 = ({ elements }) => {
+ return {elements}
;
+};
+
+const Component3 = ({ elements }) => {
+ return There are {elements.length} elements
;
+};
+
+const Component4 = ({ elements, count }) => {
+ return {!count && 'No results found'}
;
+};
+
+const Component5 = ({ elements }) => {
+ return {!!elements.length &&
}
;
+};
+
+const Component6 = ({ elements }) => {
+ return {Boolean(elements.length) &&
}
;
+};
+
+const Component7 = ({ elements }) => {
+ return {elements.length > 0 &&
}
;
+};
+
+const Component8 = ({ elements }) => {
+ return {elements.length ?
: null}
;
+};
+
+const Component9 = ({ elements, count }) => {
+ return {count ?
: null}
;
+};
+
+const Component10 = ({ elements, count }) => {
+ return {count ?
: }
;
+};
+
+const Component11 = ({ elements, count }) => {
+ return {!!count &&
}
;
+};
+
+const Component12 = ({ elements, count }) => {
+ return (
+
+
{direction ? (direction === 'down' ? '▼' : '▲') : ''}
+
{containerName.length > 0 ? 'Loading several stuff' : 'Loading'}
+
+
{!!direction && direction === 'down' && '▼'}
+
{direction === 'down' && !!direction && '▼'}
+
{direction === 'down' || (!!direction && '▼')}
+
{(!display || display === DISPLAY.WELCOME) && foo}
+
{customTitle || defaultTitle}
;
+};
+
+const Component2 = ({ elements }) => {
+ return {elements}
;
+};
+
+const Component3 = ({ elements }) => {
+ return There are {elements.length} elements
;
+};
+
+const Component4 = ({ elements, count }) => {
+ return {!count && 'No results found'}
;
+};
+
+const Component5 = ({ elements }) => {
+ return {!!elements.length &&
}
;
+};
+
+const Component6 = ({ elements }) => {
+ return {Boolean(elements.length) &&
}
;
+};
+
+const Component7 = ({ elements }) => {
+ return {elements.length > 0 &&
}
;
+};
+
+const Component8 = ({ elements }) => {
+ return {elements.length ?
: null}
;
+};
+
+const Component9 = ({ elements, count }) => {
+ return {count ?
: null}
;
+};
+
+const Component10 = ({ elements, count }) => {
+ return {count ?
: }
;
+};
+
+const Component11 = ({ elements, count }) => {
+ return {!!count &&
}
;
+};
+
+const Component12 = ({ elements, count }) => {
+ return (
+
+
{direction ? (direction === 'down' ? '▼' : '▲') : ''}
+
{containerName.length > 0 ? 'Loading several stuff' : 'Loading'}
+
+
{!!direction && direction === 'down' && '▼'}
+
{direction === 'down' && !!direction && '▼'}
+
{direction === 'down' || (!!direction && '▼')}
+
{(!display || display === DISPLAY.WELCOME) && foo}
+