[React Compiler Bug] `&&` conditional renders `0` as text node when first operand is falsy

[famameilin]

Bug Description

When using the A && B && C && <JSX> conditional rendering pattern, if the first operand A is falsy (e.g., 0), React Compiler renders the falsy value as a text node instead of rendering nothing.

Reproduction

Repro repo: https://github.com/famameilin/repro-react-compiler-0-bug

Environment:

• React 19.2.4
• react-dom 19.2.4
• babel-plugin-react-compiler 1.0.0
• @vitejs/plugin-react 6.0.1
• Vite 8.0.1

Repro code:

function HeroPanel({ totalPages }: { totalPages?: number }) {
  const onPageChange = (page: number) => {
    console.log('page change to', page);
  };

  return (
    <div>
      <button>上传小说</button>
      {totalPages && totalPages > 1 && onPageChange && (
        <div>分页内容</div>
      )}
    </div>
  );
}

// Usage: <HeroPanel totalPages={0} />

Expected: When totalPages = 0, nothing is rendered after the button (because 0 && ... short-circuits to 0, and React should not render falsy values as text).

Actual: The number 0 is rendered as a text node after the button.

Step-by-Step Analysis

1. totalPages = 0 (falsy)
2. Expression: {totalPages && totalPages > 1 && onPageChange && (<div>...</div>)}
3. JavaScript evaluates: 0 && false && undefined && ... → short-circuits to 0
4. React receives 0 as the expression result
5. Instead of treating 0 as "nothing to render", React renders it as a text node

Workaround

Replace && with ternary operator:

{totalPages && totalPages > 1 && onPageChange ? (
  <div>分页内容</div>
) : null}

Related Issues

This may be related to #33181 — status && <MyItem /> causes hooks mismatch, which also involves conditional rendering with && and the React Compiler.

Tags

• Component: React Compiler
• Type: Bug

[Dipanshusinghh]

@famameilin I would like to work on this issue. Please assign it to me.