React Conditional Rendering: Why {count && <X/>} Renders a Stray 0

Why React renders 0

JSX conditional rendering usually looks like this:

{unread && <span>{unread} unread</span>}

When unread is 0, JavaScript short-circuits: the && expression evaluates to 0 (the left operand), not to false. React renders numbers directly, so 0 appears on the screen. This is not a React bug - it behaves exactly as JavaScript says it should. The trap is that 0 is falsy, so developers expect it to suppress the right side, but React renders any number it receives, 0 included.

Only these values are skipped by React: false, null, undefined, and an empty string. 0 and NaN are rendered.

The fix: guard with a real boolean

Replace the falsy number with an explicit boolean test:

// Before - stray 0 when unread is 0
{unread && <span>{unread} unread</span>}

// After - nothing renders when unread is 0
{unread > 0 && <span>{unread} unread</span>}

Two other safe patterns:

// Double-bang coerces any falsy value to false
{!!unread && <span>{unread} unread</span>}

// Ternary returns null explicitly
{unread ? <span>{unread} unread</span> : null}

All three produce false/null when the count is zero, which React skips.

The same bug with arrays

The pattern bites arrays too:

// Renders 0 when items is an empty array
{items.length && <List items={items} />}

// Fixed
{items.length > 0 && <List items={items} />}

Any time the left operand of && is a number (count, length, index), guard it with a comparison rather than leaning on truthiness.

Lint rules that catch it automatically

The ESLint plugin for React ships a rule that flags this pattern:

"react/jsx-no-leaked-render": ["error", { "validStrategies": ["ternary", "coerce"] }]

Enabling it turns the entire class of stray-number renders into a build-time error, so it never reaches code review.