React Conditional Rendering

As a React developer with over a decade of experience, I’ve seen firsthand how crucial conditional rendering is in building dynamic, user-friendly web applications. React’s ability to show or hide components based on certain conditions allows us to create responsive interfaces that adapt to user interactions and data changes seamlessly.

In this article, I’ll walk you through multiple ways to conditionally render components in React. Whether you’re new to React or looking to refine your skills, these practical examples will help you master this essential technique.

Table of Contents

What is Conditional Rendering in React?

Conditional rendering in React means displaying components or elements only when certain conditions are met. This is especially useful when you want to show different UI elements based on user actions, authentication status, or data availability.

From my experience, mastering conditional rendering can significantly improve both the performance and user experience of your React apps.

Method 1: Use JavaScript if Statements

One of the simplest ways to conditionally render components is by using standard JavaScript if statements inside your React component’s render method or functional component body.

Here’s a practical example based on a common USA-specific user scenario, showing a special message only to users from California:

import React from 'react';

function WelcomeMessage({ state }) {
  if (state === 'California') {
    return <h1>Welcome, California user! Enjoy our exclusive offers.</h1>;
  }
  return <h1>Welcome to our website!</h1>;
}

export default function App() {
  const userState = 'California'; // This could come from user profile or API

  return (
    <div>
      <WelcomeMessage state={userState} />
    </div>
  );
}

I executed the above example code and added the screenshot below.

This method is simple to understand. It works well when you have clear, simple conditions.

Method 2: Use the Ternary Operator

The ternary operator is a concise way to conditionally render JSX inline. I use this approach often when the condition is simple and you want to keep your code clean.

Here’s an example that shows a login button if the user is not logged in, and a logout button if they are:

import React, { useState } from 'react';

export default function AuthButtons() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      {isLoggedIn ? (
        <button onClick={() => setIsLoggedIn(false)}>Logout</button>
      ) : (
        <button onClick={() => setIsLoggedIn(true)}>Login</button>
      )}
    </div>
  );
}

I executed the above example code and added the screenshot below.

This pattern is efficient and keeps your JSX compact without sacrificing readability.

Method 3: Use Logical AND (&&) Operator

When you want to render a component only if a condition is true, the logical AND operator is a great choice. It’s clean and avoids extra else branches.

Here’s a USA-specific example where we show a special alert only if the user is from New York:

import React from 'react';

export default function NYAlert({ state }) {
  return (
    <div>
      {state === 'New York' && <p>Special alert for New York residents!</p>}
    </div>
  );
}

I executed the above example code and added the screenshot below.

This method is perfect for optional UI elements that don’t require an alternative display.

Method 4: Use Immediately Invoked Function Expressions (IIFE)

For more complex conditions, I sometimes use an IIFE inside JSX to execute multiple lines of logic before returning the component.

Example:

import React from 'react';

export default function UserGreeting({ user }) {
  return (
    <div>
      {(() => {
        if (!user) return <p>Please log in.</p>;
        if (user.state === 'Texas') return <p>Howdy, Texas user!</p>;
        return <p>Welcome, {user.name}!</p>;
      })()}
    </div>
  );
}

While less common, this method is useful when conditions require multiple checks and you want to keep JSX readable.

Method 5: Conditional Rendering with Switch Statement

For multiple conditions, a switch statement inside a helper function can make your code cleaner.

Example:

import React from 'react';

function renderMessage(state) {
  switch (state) {
    case 'Florida':
      return <p>Welcome, Florida user! Enjoy the sunshine.</p>;
    case 'Washington':
      return <p>Hello, Washington user! Don’t forget your umbrella.</p>;
    default:
      return <p>Welcome to our site!</p>;
  }
}

export default function StateMessage({ state }) {
  return <div>{renderMessage(state)}</div>;
}

This approach is scalable and easy to maintain as your conditions grow.

Practical Tips from My Experience

Keep it simple: Use the simplest method that fits your use case. Overcomplicating conditional rendering can make components hard to read.
Use helper functions: For complex logic, move conditions outside JSX to keep your render method clean.
Avoid repetitive code: When multiple conditions render similar components, try to abstract common parts.
Consider performance: React efficiently updates only what changes, but unnecessary conditional checks can still add overhead.

Mastering conditional rendering unlocks the true power of React’s dynamic UI capabilities. Whether you’re customizing content for users from different US states or toggling features based on login status, these methods will help you build responsive and maintainable applications.

If you want to dive deeper, exploring React’s context API or state management libraries can further enhance how you control component rendering.

I hope you found these practical examples useful. Feel free to experiment with these methods in your projects, and happy coding!

You may also read:

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/