Conditional Rendering in React — React Technical Interview Questions & Answers

Conditional Rendering in React

Conditional Rendering in React

  • Show UI only when a condition is true. Ternary when both sides exist: loggedIn ? <Home /> : <Login />. && when the false side is nothing: ok && <p>Saved</p>. Watch zero: {count && <p>Mail</p>} prints 0 when count is 0 because 0 is falsy but still a valid React child. Use count > 0 && or a ternary.
  • Early return is also conditional rendering: if (!user) return <p>Sign in</p>; then the happy path below. Don’t nest five ternaries — extract a small component.
  • Conditional Rendering in React — count 0 → No mail. count 3 → 3 new. Prefer ternary when zero is a real case.

Technical Interview Tip: Ternary vs &&. Mention the zero trap.

Code Examples for Conditional Rendering in React

Example

// Conditional
export default function Inbox({ count }) {
  return (
    <section>
      {count > 0 ? <p>{count} new</p> : <p>No mail</p>}
    </section>
  );
}

Conditional Rendering in React — count 0 → No mail. count 3 → 3 new. Prefer ternary when zero is a real case.

How to Explain Conditional Rendering in React to an Interviewer

Why can {count && <Badge />} show 0?

0 is rendered