Modern user interfaces are dynamic. What a user sees often depends on different conditions.

For example:

• Show a dashboard when the user is logged in
• Show a login button when the user is not authenticated
• Display a loading spinner while data is loading
• Show an error message when a request fails
• Display an empty state when there is no data
• Show admin controls only to administrators

In React, this is called conditional rendering.

Conditional rendering allows a component to display different UI based on a condition, state, props, or available data.

In this article, we’ll understand how conditional rendering works in React and explore the most common patterns for writing clean and readable conditional UI.

---

What Is Conditional Rendering in React?

Conditional rendering means rendering different React elements depending on whether a condition is true or false.

A simple example is:

Condition
   │
   ├── True  → Show UI A
   │
   └── False → Show UI B

Imagine a user authentication check:

Is User Logged In?
        │
   ┌────┴────┐
  Yes        No
   │          │
   ▼          ▼
Dashboard   Login Page

React uses normal JavaScript logic to decide what should be rendered.

That is an important point:

React conditional rendering is based on JavaScript conditions.

You can use techniques such as:

• if statements
• Ternary operators
• Logical &&
• switch statements
• Early returns
• Variables containing JSX

The best approach depends on how complex the condition is.

---

Conditional Rendering and React Rendering

A React component is essentially a function that returns a description of the UI.

For example:

function App() {
  return <h1>Hello React</h1>;
}

When state or props change, React can render the component again.

During that render, JavaScript evaluates your conditions.

Conceptually:

Props / State Changes
        │
        ▼
Component Runs Again
        │
        ▼
Condition Is Evaluated
        │
        ▼
Choose JSX
        │
        ▼
React Updates UI

This is why conditional rendering works naturally with state and props.

---

Using if Statements

The simplest approach is to use a normal JavaScript if statement before returning JSX.

For example:

function Dashboard({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Welcome to your Dashboard</h1>;
  }

  return <h1>Please log in</h1>;
}

The logic is straightforward:

isLoggedIn
     │
 ┌───┴────┐
true      false
 │          │
 ▼          ▼
Dashboard  Login Message

This approach is easy to understand and works especially well when you want to return completely different UI.

---

Using if...else

You can also use an explicit if...else structure.

function UserStatus({ isLoggedIn }) {
  if (isLoggedIn) {
    return <p>You are logged in.</p>;
  } else {
    return <p>Please sign in.</p>;
  }
}

However, because the return inside the if already ends that path, many developers prefer the simpler version without else.

if (isLoggedIn) {
  return <Dashboard />;
}

return <Login />;

This is usually easier to read.

---

Using the Ternary Operator

The ternary operator is one of the most common conditional rendering patterns in React.

The basic syntax is:

condition ? valueIfTrue : valueIfFalse

In JSX:

{isLoggedIn ? <Dashboard /> : <Login />}

The flow looks like this:

isLoggedIn?
     │
 ┌───┴────┐
true      false
 │          │
 ▼          ▼
Dashboard   Login

Ternaries are useful when the true and false conditions are both simple.

For example:

<button>
  {isLoggedIn ? "Logout" : "Login"}
</button>

This makes it easy to switch between two values.

---

Avoid Deeply Nested Ternaries

Ternaries are useful, but too many nested conditions can make JSX difficult to understand.

For example:

{
  isLoading
    ? <Loader />
    : isError
      ? <Error />
      : data
        ? <Content />
        : <EmptyState />
}

Although this works, it becomes harder to read as more conditions are added.

A clearer approach may be:

if (isLoading) {
  return <Loader />;
}

if (isError) {
  return <Error />;
}

if (!data) {
  return <EmptyState />;
}

return <Content />;

The lesson is simple:

Use ternaries for simple choices and normal JavaScript logic for complex conditions.

---

Using Logical &&

Sometimes you only want to render something when a condition is true.

For this, logical AND (&&) is useful.

For example:

{isAdmin && <AdminPanel />}

The logic is:

isAdmin
   │
 ┌─┴──────┐
true      false
 │          │
 ▼          ▼
Render     Render Nothing
AdminPanel

Another example:

{error && <p>{error}</p>}

If error contains a value, the error message is displayed.

If it is falsy, React does not render the component.

This pattern is commonly used for:

• Error messages
• Notifications
• Modals
• Admin-only sections
• Optional content

---

Be Careful with && and Numbers

There is one common issue developers should understand.

Consider:

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

If items.length is 0, JavaScript returns 0.

React can render that value, which may result in an unexpected 0 appearing in the UI.

A safer approach is:

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

This clearly produces a boolean condition.

Conceptually:

items.length > 0
        │
        ▼
true / false
        │
        ▼
Render or Don't Render

---

Using Variables to Store JSX

For more complex conditions, you can store JSX in a variable.

For example:

function App({ status }) {
  let content;

  if (status === "loading") {
    content = <Loader />;
  } else if (status === "error") {
    content = <ErrorMessage />;
  } else {
    content = <Dashboard />;
  }

  return <main>{content}</main>;
}

The flow becomes:

Status
  │
  ├── loading → Loader
  ├── error   → Error Message
  └── success → Dashboard

This approach keeps the JSX inside the return statement clean.

---

Using Early Returns

Early returns are one of the cleanest ways to handle multiple application states.

For example:

function ProductPage({ isLoading, error, product }) {
  if (isLoading) {
    return <Loader />;
  }

  if (error) {
    return <ErrorMessage />;
  }

  if (!product) {
    return <EmptyState />;
  }

  return <ProductDetails product={product} />;
}

This creates a clear top-to-bottom flow:

Start
  │
  ├── Loading? → Loader
  │
  ├── Error? → Error Message
  │
  ├── No Data? → Empty State
  │
  └── Otherwise → Main Content

Early returns are especially useful for:

• API states
• Authentication checks
• Permission checks
• Loading states
• Error handling

---

Conditional Rendering with Component State

Conditional rendering is frequently controlled by state.

For example, imagine a button that shows or hides additional content.

Conceptually:

Initial State
isVisible = false
       │
       ▼
Content Hidden
       │
User Clicks Button
       │
       ▼
isVisible = true
       │
       ▼
Content Visible

The JSX condition decides whether the content should appear based on the current state.

This pattern is commonly used for:

• Modals
• Dropdowns
• Sidebars
• Accordions
• Tooltips
• Notifications

---

Conditional Rendering with Props

Conditions can also depend on props received from a parent component.

For example:

function UserBadge({ role }) {
  if (role === "admin") {
    return <span>Administrator</span>;
  }

  return <span>User</span>;
}

The parent controls the value:

Parent
   │
   │ role="admin"
   ▼
UserBadge
   │
   ▼
Administrator UI

This allows reusable components to display different content based on the data they receive.

---

Rendering Different Components

Conditional rendering does not need to be limited to text.

You can render completely different components.

{isLoggedIn ? <Dashboard /> : <Login />}

You can also select a component based on a value:

User Role
   │
   ├── Admin  → AdminDashboard
   ├── Editor → EditorDashboard
   └── User   → UserDashboard

For a small number of cases, normal conditions work well. For many possible states, a mapping pattern or separate component logic may be easier to maintain.

---

Using switch for Multiple Conditions

When you have several possible values, a switch statement can make the logic clearer.

For example:

function StatusMessage({ status }) {
  switch (status) {
    case "loading":
      return <Loader />;

    case "success":
      return <SuccessMessage />;

    case "error":
      return <ErrorMessage />;

    default:
      return <p>Unknown status</p>;
  }
}

This works well when you are checking one variable against multiple possible values.

Conceptually:

Status
  │
  ├── loading → Loader
  ├── success → Success
  ├── error   → Error
  └── default → Unknown

---

Conditional Styling

You can also conditionally change CSS classes.

For example:

<button className={isActive ? "active" : "inactive"}>
  Profile
</button>

The UI structure remains the same, but its appearance changes depending on the condition.

Conceptually:

isActive
   │
   ├── true  → active class
   └── false → inactive class

Conditional styling is useful for:

• Active navigation links
• Selected items
• Form validation
• Loading buttons
• Open and closed menus

---

Conditional Attributes

Attributes can also depend on a condition.

For example:

<button disabled={isLoading}>
  Submit
</button>

If isLoading is true, the button becomes disabled.

You can also conditionally change attribute values:

<img
  src={isDarkMode ? darkLogo : lightLogo}
  alt="Company logo"
/>

Conditional logic in React is not limited to rendering entire components.

It can also control:

• Text
• Classes
• Attributes
• Styles
• Component props

---

Rendering an Empty State

A good user interface should handle situations where data does not exist.

For example:

Products
   │
   ├── Has Products → Show Product List
   │
   └── No Products  → Show Empty State

Instead of showing a blank page, you can provide useful feedback.

Common empty states include:

• No search results
• No notifications
• No orders
• No saved items

Conditional rendering makes these states easy to handle.

---

Handling Loading, Error, and Success States

One of the most practical uses of conditional rendering is handling API requests.

A typical flow looks like:

Request Starts
      │
      ▼
   Loading
      │
      ▼
Request Complete
      │
   ┌──┴─────┐
Success     Error
  │          │
  ▼          ▼
Content    Error UI

Your component should clearly handle each state.

A common pattern is:

1. Show loading UI
2. Show an error if something fails
3. Show empty UI if there is no data
4. Otherwise show the main content

This prevents users from seeing confusing blank screens.

---

Conditional Rendering and Permissions

Conditional rendering is also commonly used for UI permissions.

For example:

User
 │
 ├── Can Edit? ── Yes → Show Edit Button
 │
 └── Can Delete? ─ Yes → Show Delete Button

For example:

{canEdit && <EditButton />}

{canDelete && <DeleteButton />}

However, remember an important security rule:

Hiding a button in React does not secure the backend action.

Conditional rendering controls the user interface only.

Real authorization must also be enforced on the server or API.

---

Conditional Rendering vs CSS Hiding

There is a difference between conditionally rendering an element and hiding an already rendered element with CSS.

Conditional rendering:

Condition false
      │
      ▼
Element is not rendered

CSS hiding:

Element is rendered
      │
      ▼
CSS makes it invisible

For example, CSS may use:

display: none

The element can still exist in the DOM.

Choose the approach based on your requirement.

Conditional rendering is often useful when the component should not exist at all.

CSS hiding can be useful when you need to preserve the component and only change its visibility.

---

Common Conditional Rendering Mistakes

Using Complex Logic Directly Inside JSX

Avoid making JSX difficult to read.

Instead of deeply nesting multiple conditions, move complex logic outside the return statement.

---

Using && When Both Outcomes Matter

This:

{isLoggedIn && <Dashboard />}

only handles the true case.

If you need different UI for both cases, use a ternary or another pattern:

{isLoggedIn ? <Dashboard /> : <Login />}

---

Forgetting About the 0 Problem

Avoid:

{items.length && <List />}

Prefer:

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

---

Creating Deeply Nested Ternaries

If your condition looks difficult to explain, move the logic into if statements, a helper function, or separate components.

Readable code is usually better than trying to keep everything inside one JSX expression.

---

Using UI Conditions as Security

Do not rely on conditional rendering to protect sensitive operations.

A hidden button does not prevent someone from directly calling an API.

Always validate authorization on the backend.

---

Best Practices for React Conditional Rendering

Keep Simple Conditions Inside JSX

Simple conditions are easy to understand:

{isOpen && <Modal />}

or:

{isLoggedIn ? <Dashboard /> : <Login />}

---

Use Early Returns for Page-Level States

For loading, error, and authentication states, early returns often provide the clearest structure.

Loading?
Error?
Authorized?
Data Available?
Main Content

---

Avoid Repeating Complex Conditions

If the same condition is used multiple times, calculate it once.

Conceptually:

Complex Condition
       │
       ▼
Meaningful Variable
       │
       ▼
Use in JSX

This improves readability and reduces duplication.

---

Break Complex UI into Components

Instead of one component handling every possible state, create focused components when appropriate.

For example:

UserPage
├── LoadingState
├── ErrorState
├── EmptyState
└── UserContent

This makes each component easier to understand and test.

---

Choosing the Right Conditional Rendering Pattern

Here is a simple guide:

Situation	Recommended Approach
Two simple outcomes	Ternary operator
Render only when true	&&
Completely different page states	if or early return
Multiple values of one variable	switch
Complex conditions	Calculate logic before JSX
Reusable state-specific UI	Separate components

The goal is not to use one pattern everywhere.

The goal is to choose the pattern that makes the code easiest to understand.

---

How Conditional Rendering Fits Into React

Conditional rendering is closely connected to React’s rendering process.

A simplified flow looks like this:

Props or State
      │
      ▼
Component Function Runs
      │
      ▼
JavaScript Conditions
      │
      ▼
Choose JSX
      │
      ▼
React Compares UI
      │
      ▼
Required Updates
      │
      ▼
Browser UI

When the condition changes, React can render a new UI description and update the necessary parts of the interface.

---

Final Thoughts

Conditional rendering is one of the most important concepts in React because almost every real application needs to display different UI in different situations.

You will use it for:

• Authentication
• Loading states
• Errors
• Empty states
• Permissions
• User roles
• Dynamic buttons
• Modals
• Menus
• API data

The most important thing to remember is:

React uses normal JavaScript conditions to decide what UI should be rendered.

For simple conditions, use concise patterns such as ternaries and &&.

For more complex logic, use if statements, early returns, or separate components.

The best conditional rendering code is not the shortest code. It is the code that makes the application’s possible states easy to understand.

A simple mental model is:

Current State
     │
     ▼
Evaluate Condition
     │
     ▼
Choose UI
     │
     ▼
React Renders It

Once you understand this flow, building dynamic React interfaces becomes much easier.