Understanding Conditional Rendering in React (2025 Guide)

Conditional rendering in React is a fundamental concept that allows React components to display different UI elements based on application state. It's React's declarative approach to showing or hiding content based on conditions—essential knowledge for any React developer.

This React tutorial covers all conditional rendering techniques including logical operators, ternary expressions, and React best practices for building maintainable components.

---

Logical AND (&&) Operator

The logical AND operator is the most common React conditional rendering pattern when you want to render something only if a condition is true. It's widely used in React functional components for clean, readable code.

function Greeting({ isLoggedIn }) {
  return (
    <div>
      <h1>Welcome to React!</h1>
      {isLoggedIn && <p>You are logged in.</p>}
    </div>
  );
}

• If isLoggedIn is true, React will render the <p> element.
• If isLoggedIn is false, nothing is rendered.

⚠️ Common pitfall — numbers with &&: When the left side of && is a falsy number, JavaScript returns that number, and React renders it as text. The classic real-world bug looks like this:

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

When items.length is 0, this expression evaluates to 0 — and React renders the literal character "0" on the page instead of nothing. (Other falsy values like false, null, and undefined render nothing, which is why this trap is specific to numbers.) Fix it by coercing to a boolean: {items.length > 0 && <List items={items} />}.

➡️ Suggested image: /images/react-conditional-rendering-and-example.png (screenshot of code + output).

---

Ternary Operator (condition ? trueCase : falseCase)

The ternary operator is best when you want to choose between two options.

function UserStatus({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
    </div>
  );
}

• If isLoggedIn is true, “Welcome back!” will render.
• Otherwise, “Please log in.” will render.

👉 Best practice: Use ternaries for two cases only. If you find yourself nesting multiple ternaries, switch to if...else or switch for readability.

➡️ Suggested image: /images/react-conditional-rendering-ternary-example.png (side-by-side ternary code and output).

---

if...else and switch

For more complex conditions, handle logic before the return statement in your component:

function AccessLevel({ role }) {
  let message;

  if (role === "admin") {
    message = "You have full access.";
  } else if (role === "editor") {
    message = "You can edit content.";
  } else {
    message = "View-only access.";
  }

  return <p>{message}</p>;
}

Or with switch:

function AccessLevel({ role }) {
  switch (role) {
    case "admin":
      return <p>You have full access.</p>;
    case "editor":
      return <p>You can edit content.</p>;
    default:
      return <p>View-only access.</p>;
  }
}

➡️ Suggested image: /images/react-conditional-rendering-if-switch.png (flow diagram showing branching logic).

---

Modern Alternatives

These patterns are stable across React 18 and React 19 — conditional rendering semantics haven't changed between versions:

• Use early returns to simplify conditional rendering.
• Combine with optional chaining (?.) — a JavaScript ES2020 feature, not React-specific — to safely access deeply nested properties.
• Leverage component composition to avoid deeply nested conditions.

Example with early return:

function Profile({ user }) {
  if (!user) {
    return <p>Loading...</p>;
  }
  return <h2>{user.name}</h2>;
}

➡️ Suggested image: /images/react-conditional-rendering-early-return.png (screenshot of simple code + "Loading..." UI).

---

Conclusion

Conditional rendering is a cornerstone of React development. Here's a quick summary of when to use each approach:

• Use && for simple show/hide patterns in React
• Use ternary operators for choosing between two UI states
• Use if/else or switch for complex React component logic
• Use early returns to handle loading and error states cleanly

---