Conditional Rendering in React: Clean Patterns (and Pitfalls)

Jun 20, 2026 · 6 min read

← All articles

Real interfaces are full of "if this, then show that" — a spinner while data loads, an error message when something breaks, a different button when you're logged in. React has no special template syntax for this; you just use plain JavaScript. Here are the patterns worth knowing, and the one gotcha that catches almost everyone.

Return early with an if

When a whole component should render something completely different, an early return is the cleanest option:

function Profile({ user }) {
  if (!user) {
    return <p>Please log in.</p>;
  }
  return <h1>Welcome back, {user.name}</h1>;
}

Ternaries for either/or

You can't use if inside JSX, but you can use a ternary. It's perfect for "show A or B":

<button>{loading ? 'Saving…' : 'Save'}</button>

&& for "show it, or show nothing"

To render something only when a condition is true, && reads nicely:

{error && <p className="error">{error}</p>}

The famous 0 gotcha

Here's the bug everyone hits eventually. With &&, if the left side is the number 0, React prints 0 on the page instead of rendering nothing:

// if items.length is 0, this shows "0" on screen!
{items.length && <List items={items} />}

// fix: give && a real boolean
{items.length > 0 && <List items={items} />}

The rule: only put genuine booleans on the left of &&. A length or a count is a number, and a 0 will happily leak onto the page.

Choosing between them

• Whole-component branches → early return.
• Either/or inside JSX → ternary.
• Show-or-nothing → && (with a real boolean).

Conditional rendering shows up constantly alongside lists — for example, showing an "empty" message when there's nothing to map over, so it's worth reading lists and keys too. And if you're unsure where the condition's data should live, props vs state has the answer.

Key takeaways

• It's just JavaScript: if, the ternary, and &&.
• Early return for whole-component branches; ternary for either/or.
• Guard && with a real boolean so a 0 doesn't render.

Want the structured path? Explore the React roadmap or browse more articles.