Understanding && in React JSX: Conditional Rendering and Common Pitfalls

1. && operator in JavaScript (logical AND)

In JavaScript, && is not just a boolean operator. It uses short-circuit evaluation and returns one of the actual operands.

Basic rule

For expression:

A && B

JavaScript evaluates:

1. Evaluate A
2. If A is falsy, return A immediately
3. If A is truthy, return B

Falsy values in JavaScript

These are considered falsy:

• false
• 0
• "" (empty string)
• null
• undefined
• NaN

Everything else is truthy.

Examples

true && "Hello"        // "Hello"
false && "Hello"       // false

0 && "Hello"           // 0
1 && "Hello"           // "Hello"

"" && "Hello"          // ""
"abc" && "Hello"       // "Hello"

null && "Hello"        // null
undefined && "Hello"   // undefined

So remember:

&& returns the first falsy value, or the last value if all are truthy.

---

2. How && is used for conditional rendering in React

In React JSX, you can conditionally render something using && like this:

{condition && <MyComponent />}

Why this works

React will try to render the result of the expression:

• If condition is truthy → expression becomes <MyComponent /> → React renders it
• If condition is falsy → expression becomes the falsy value → React ignores it (for most falsy values)

Common examples

Simple boolean condition

{isLoggedIn && <LogoutButton />}

• If isLoggedIn === true → <LogoutButton /> renders
• If isLoggedIn === false → nothing renders

---

3. Important gotcha: 0 will render!

This is a very common bug.

Because 0 is falsy but also a valid renderable value, React will render it.

{items.length && <ItemList items={items} />}

If items.length === 0:

0 && <ItemList />

Result is 0, and React will render:

0

😬

Correct ways to handle this

Option 1: Explicit comparison

{items.length > 0 && <ItemList items={items} />}

Option 2: Use Boolean()

{Boolean(items.length) && <ItemList items={items} />}

---

4. When NOT to use &&

If your condition might be something other than a boolean (like numbers, empty strings, etc.), be careful.

For complex conditions, && can hurt readability.

Instead, use:

Ternary operator

{isLoading ? <Spinner /> : <Content />}

Or early return

if (!isAuthorized) {
  return null;
}

---

5. Mental model for React

Think of this:

{condition && <Component />}

As shorthand for:

{condition ? <Component /> : null}

⚠️ Except for the 0 case and other non-boolean falsy values.

---

Quick summary

Case	Result
true && <Comp />	Renders <Comp />
false && <Comp />	Renders nothing
0 && <Comp />	Renders 0 ❌
"" && <Comp />	Renders nothing
null && <Comp />	Renders nothing