In web applications, the user interface is rarely static. Depending on user actions, login permissions, API response statuses, or device states, components must render completely different HTML output.

Conditional Rendering in React means displaying different UI components or markup based on specific conditions or state variables.

Analogy:

Think of conditional rendering like a traffic light. If the signal is green, show the GO signal. If the signal is red, show the STOP signal.

Real-world web applications rely on dynamic states:

• Authentication State: Show <UserDashboard /> if logged in; show <LoginForm /> if logged out.
• Async API Data Fetching: Show <LoadingSpinner /> while fetching, <ErrorMessage /> on failure, <EmptyState /> if 0 results return, or <DataGrid /> on success.
• Permission Roles: Show an "Edit / Delete" button for Admin users, but hide it for regular members.

You can use standard JavaScript if and else statements *outside* the JSX return statement inside your component function body.

function AuthNotification({ isLoggedIn, username }) {
  if (isLoggedIn) {
    return <div className="welcome-banner">Welcome back, {username}! 👋</div>;
  } else {
    return <div className="login-banner">Please log in to continue. 🔒</div>;
  }
}

The Ternary Operator is the most popular inline conditional rendering pattern in React because it can be embedded directly inside JSX curly braces {}.

Syntax:

{condition ? <TrueComponent /> : <FalseComponent />}

function UserHeader({ user }) {
  return (
    <header className="header">
      <h1>My App</h1>
      {user ? (
        <button onClick={logout}>Log Out ({user.name})</button>
      ) : (
        <button onClick={login}>Log In</button>
      )}
    </header>
  );
}

When you want to render a piece of UI only if a condition is true, and render nothing when it is false, use the Logical AND (&&) operator.

How Logical Short-Circuiting Works:

In JavaScript, true && expression evaluates to expression, whereas false && expression evaluates to false (which React ignores and renders nothing).

function Mailbox({ unreadMessages }) {
  return (
    <div className="mailbox">
      <h2>Inbox Overview</h2>
      {unreadMessages.length > 0 && (
        <span className="badge">You have {unreadMessages.length} unread messages! ✉️</span>
      )}
    </div>
  );
}

Use the Logical OR (||) operator to provide default fallback text or components when a value is null, undefined, or empty string.

function ProfileName({ displayName }) {
  return (
    <h3>User: {displayName || "Anonymous Developer"}</h3>
  );
}

When managing multi-state UI (e.g., loading, error, empty, success), nesting multiple ternary operators leads to unreadable "ternary spaghetti code".

Instead, use Early Returns or a helper switch block before returning JSX:

function UserFeed({ status, data, errorMessage }) {
  // Early Return 1: Loading State
  if (status === 'loading') {
    return <div className="spinner">Loading user data... ⏳</div>;
  }

  // Early Return 2: Error State
  if (status === 'error') {
    return <div className="error-alert">Error: {errorMessage} ❌</div>;
  }

  // Early Return 3: Empty State
  if (status === 'success' && data.length === 0) {
    return <div className="empty-box">No records found. Create your first item! 📭</div>;
  }

  // Main Render: Success Data Grid
  return (
    <ul className="data-grid">
      {data.map(item => <li key={item.id}>{item.title}</li>)}
    </ul>
  );
}

1. The Falsy Zero Bug (0 && <Component />):

In JavaScript, 0 && <Component /> evaluates to 0. React renders the number 0 onto the browser screen!

• ❌ Wrong: {items.length && <List />} (renders 0 when length is zero)
• ✅ Correct: {items.length > 0 && <List />} or {Boolean(items.length) && <List />}

2. Nested Ternary Spaghetti:

Avoid writing {cond1 ? (cond2 ? <A /> : <B />) : <C />}. Extract conditions into separate sub-components or guard functions.

3. Causing Side Effects Inside Conditions:

Never trigger state updates (setCount()) or API calls directly inside JSX conditional branches.

Q1: What does React render when a condition evaluates to null, undefined, or false?

*Answer*: React renders nothing (blank space) without throwing errors.

Q2: Why does 0 && <Child /> display 0 on screen?

*Answer*: In JavaScript, short-circuit evaluation of 0 && expression yields 0. Since 0 is a valid number in React, React displays it on screen. Always use boolean comparisons (length > 0).

Q3: How do you return early from a component based on props?

*Answer*: Perform an if check at the top of the function and return null or a loading fallback component.

Here is a complete, interactive component managing Loading, Error, Empty, and Success states with custom toggle controls: