Understanding Conditional Rendering in React: 5 Common Techniques

Introduction

After learning JSX, I started wondering how React decides what to display on the screen.

For example:

• Show "Welcome" only after a user logs in.
• Display a Loading... message while data is being fetched.
• Show "No Data Found" when a list is empty.
• Display an Admin Dashboard only for administrators.

The answer is conditional rendering in React.

Conditional rendering allows React to display different UI based on a condition.

In this article, I'll explore the five common ways of conditional rendering and learn when to use each one.

What is Conditional Rendering?

Conditional rendering simply means displaying different content depending on whether a condition is true or false.

Think about a login page.

If the user is logged in, we display:

Welcome

Otherwise we display:

Please Login

There are several ways. The most common are:

• if...else
• Element Variables
• Ternary Conditional Operator
• Short Circuit Operator
• Early Return

Common Ways of Conditional Rendering

React provides several ways to render different UI based on conditions. Each approach has its own use case.

Method	What it does	Example use
if...else	Executes one block of code if the condition is true, otherwise executes another block.	Complex business logic, multiple conditions.
Ternary Operator (? :)	Chooses between two values or UI elements based on a condition.	Login/Logout, Active/Inactive.
Logical AND (&&)	Renders content only when a condition is true.	Admin buttons, notifications, badges.
Element Variable	Stores JSX in a variable and renders that variable later.	Cleaner JSX, reusable UI blocks.
Early Return	Returns immediately from the component if a condition is met.	Loading screens, error pages, authentication.

if...else

Used when you want to decide what to show before displaying the page. It checks a condition and returns different JSX depending on whether the condition is true or false.

if...else statements can't be written directly inside JSX because they are JavaScript statements, not expressions. Instead, place the if...else logic before the return statement and return the appropriate JSX.

Rule to remember

Expressions can go inside {} in JSX.

• Variables
• Function calls
• Arithmetic (2 + 3)
• Ternary (condition ? A : B)
• Logical AND (condition && )

Statements cannot go inside JSX.

• if...else
• for
• while
• switch

Element variables

A cleaner alternative to returning JSX directly from an if...else block is to use element variables. An element variable is simply a JavaScript variable that stores JSX, making the return statement easier to read.

Example 1:

const message = <h1>Hello!</h1>;

Here,
message is a JavaScript variable.

<h1>Hello!</h1> is a JSX element stored in that variable.
Later, you can render it like this:

return (
  <div>
    {message}
  </div>
);

Example 2: Render only part of a component

Suppose you always want to show the heading.

But only logged-in users should see a button.

function App() {

  const isLoggedIn = true;

  let button;

  if (isLoggedIn) {
    button = <button>Logout</button>;
  } else {
    button = <button>Login</button>;
  }

  return (
    <div>
      <h1>React Tutorial</h1>
      {button}
    </div>
  );
}

If isLoggedIn = true

Output:

React Tutorial

[Logout]

If isLoggedIn = false

Output:

React Tutorial

[Login]

Notice that only the button changes, while the rest of the component stays the same.

Example 3: Render nothing

Sometimes you don't want to display anything.

function App() {

  const showMessage = false;

  let message;

  if (showMessage) {
    message = <h2>Welcome!</h2>;
  }

  return (
    <div>
      <h1>Home Page</h1>
      {message}
    </div>
  );
}

Since showMessage is false,

message = undefined;

React ignores undefined, so nothing is rendered.

Output:

Home Page

No welcome message is shown.

When should you use element variables?

Use element variables when:

• You have multiple lines of JSX to conditionally render.
• The condition is too complex for a simple ternary operator.
• You want to keep the return statement clean and readable.

Ternary Conditional Operator

The main advantage of the ternary operator is that it can be used directly inside JSX.

Why is it useful in React?

JSX only allows expressions, not statements. The ternary operator is an expression, so JSX accepts it.

Why can the ternary operator be used inside JSX?

Because it returns a value.

When should you use a ternary operator?

Use it when:

• You have two possible outcomes (true/false).
• The JSX is small and simple.
• You want to keep the code concise.

For larger or more complex conditions, using an if...else statement with an element variable (before the return) is often easier to read.

Quick comparison
| if...else | Ternary (? :) |
|-----------|-----------------|
| A statement | An expression |
| Cannot be written directly inside JSX | Can be written inside JSX |
| Better for complex logic | Better for simple true/false rendering |
| Usually written before return | Written inside {} |

Short Circuit Operator

The short-circuit operator is another way to conditionally render content. It is useful when you want to display something only if a condition is true.

In React, the short-circuit operator uses the JavaScript logical AND (&&) operator.

Syntax:

condition && expression

It means:

If the condition is true, render the expression. If the condition is false, render nothing.

Example:

When the condition is false, React doesn't render the JSX on the right side of &&.

Early Return

Returns JSX immediately when a condition is met, so the rest of the component doesn't execute. It helps keep the code simple and easy to read.

When isLoading is true, React immediately returns:

It doesn't continue to the rest of the component. Once the loading is complete (isLoading = false), React skips the if statement and renders the main page.
This is a very common pattern in React applications when waiting for data from an API.

Which One Should You Use?

There isn't a single "best" method.

Choose the one that makes your code easiest to understand.

As a general guideline:

• Use if...else for complex logic.
• Use element variables to keep JSX clean.
• Use the ternary operator when choosing between two values.
• Use && when displaying something only if a condition is true.
• Use early return for loading, error, or authentication screens.

Conclusion

Conditional rendering is one of the core concepts of React.

Although there are several ways to achieve it, each method has its own purpose.

Choosing the right approach makes your components easier to read, maintain, and understand.

Understanding when to use each technique will help you write cleaner and more readable React components.

Key Takeaways

• Conditional rendering displays different UI based on conditions.
• React uses normal JavaScript for conditional rendering.
• if...else is best for complex logic.
• Element variables help keep JSX clean and readable.
• The ternary operator is ideal for choosing between two values.
• && displays content only when a condition is true.
• Early return is useful for loading, error, and authentication screens.

What's Next?

Now that I know how to display different content based on conditions, the next step is understanding how data flows between React components using props.

In the next article, I'll explore what props are, why they're useful, and how they help components communicate with each other.

Thanks for reading, and happy coding!