How to use conditional rendering in React

Conditional rendering in React is one of those fundamental concepts that separates a static UI from a dynamic, responsive one. At its core, it’s just JavaScript controlling what the UI should look like based on state, props, or any other variable. React doesn’t have special syntax for this; you just use JavaScript expressions inside JSX.

Think of it as embedding tiny decision-making machines inside your components. When something changes – user input, data fetching, a timer – your component can decide what to show or hide. Because JSX is just sugar over React.createElement calls, the ability to return different elements conditionally is simpler.

The most basic way is using simple if statements outside the JSX to decide what to render. For example:

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please sign up.</h1>;
  }
}

This pattern makes it crystal clear what you’re rendering – one component, one return statement, but the output depends on a condition. It’s clean, simple, and easy to debug.

Sometimes you want to keep your JSX inline but still have conditional logic. That’s where the ternary operator shines. Instead of writing multiple return statements, you can embed the condition directly inside the JSX like this:

function Greeting(props) {
  return (
    <div>
      {props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
    </div>
  );
}

This keeps your render method concise, especially when the conditional content is small. But as conditions get more complex, nested ternaries can become a readability nightmare.

There’s also the common pattern of short-circuit evaluation using the && operator. That is great when you want to render something only if a condition is true, and render nothing otherwise:

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length && 
        <h2>You have {unreadMessages.length} unread messages.</h2>}
    </div>
  );
}

Here, if unreadMessages.length is zero, React ignores the second expression and nothing is rendered in that spot. It’s a neat shorthand but be careful: if the value before && can be something like 0 or an empty string, it might render unexpectedly.

One pitfall to watch out for is returning null when you want to render nothing explicitly. React treats null as “do not render anything,” which can be handy:

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }
  return <div className="warning">Warning!</div>;
}

This pattern is perfect when the absence of a component is a valid state, which happens more than you think.

So, conditional rendering is really just about using JavaScript’s control flow to decide what your component returns. It’s powerful because it makes your UI logic simpler and explicit. You’re not relying on some magic syntax – you’re just writing plain JavaScript that React renders as UI.

Once you get comfortable with these basics, you can start layering in more complex conditions, splitting UI into smaller components, or even dynamically importing components based on state. But it all starts with mastering these simple building blocks.

Now, imagine you want to toggle between two very different layouts based on a user’s device type. You can do this cleanly by extracting the conditional logic outside your JSX, like so:

function ResponsiveLayout(props) {
  let content;
  if (props.isMobile) {
    content = <MobileMenu />;
  } else {
    content = <DesktopMenu />;
  }
  return <div>{content}</div>;
}

This separation keeps your JSX tidy and makes it easier to test each branch independently. Notice how React encourages a declarative style – instead of toggling visibility with DOM manipulations, you just describe “what” your UI should be given a state, and React figures out the “how.”

Conditional rendering also ties tightly with state management. Once you start using hooks like useState, your render logic can react instantly to user interactions:

function ToggleButton() {
  const [isOn, setIsOn] = React.useState(false);

  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? 'Switch Off' : 'Switch On'}
    </button>
  );
}

Every click flips the internal state, and React re-renders the button text accordingly. This tiny example encapsulates the power of conditional rendering combined with React’s reactive data flow.

By keeping conditional logic explicit and separate when needed, your components stay readable, maintainable, and easy to debug. It’s the bedrock on which more advanced UI patterns are built – once you understand this, everything else is just variations on the theme.

But when conditions start to pile up—like showing one of several components based on multiple flags or enums—then you’ll want to consider using switch statements or mapping conditions to components in an object to avoid messy nested logic. For example:

function StatusMessage({ status }) {
  switch(status) {
    case 'loading':
      return <div>Loading...</div>;
    case 'success':
      return <div>Data loaded successfully!</div>;
    case 'error':
      return <div>Error loading data.</div>;
    default:
      return null;
  }
}

This pattern is cleaner than chaining multiple if-else or nested ternaries when you have many discrete states.

Conditional rendering might seem trivial at first glance, but mastering it very important for building flexible interfaces. It’s the difference between a static page and a living, breathing app that responds to user input and asynchronous events. Next up, we’ll look at some common patterns that emerge when you start scaling conditional rendering beyond a few simple cases and how to keep your code from turning into spaghetti.

Common patterns for rendering components conditionally

One common pattern that emerges in larger applications is the use of higher-order components (HOCs) to handle conditional rendering. HOCs are functions that take a component and return a new component, typically enhancing the original with additional props or behavior. This allows you to encapsulate conditional logic outside of your UI components, making them cleaner and more focused.

function withLoading(Component) {
  return function WithLoadingComponent({ isLoading, ...props }) {
    if (isLoading) {
      return <div>Loading...</div>;
    }
    return <Component {...props} />;
  };
}

In this example, the withLoading HOC wraps any component and handles the loading state for you. This means that any component can be enhanced with loading behavior simply by wrapping it with this HOC, promoting reusability across your application.

Another pattern is using render props, which is a technique for sharing code between React components using a prop this is a function. This allows for more granular control over what gets rendered based on conditions.

function RenderPropComponent({ render }) {
  return <div>{render()}</div>;
}

function App() {
  return (
    <RenderPropComponent render={() => {
      return <h1>Hello, World!</h1>;
    }} />
  );
}

Here, the RenderPropComponent takes a render prop that’s a function returning JSX. This pattern is particularly powerful when the rendering logic needs to change based on some conditions, as it allows you to define the rendering logic outside the component itself.

When you need to manage multiple conditional states, you might also consider using an enum-like object to map your states to components. This can help avoid long chains of conditionals and keep your code organized.

const COMPONENTS = {
  loading: () => <div>Loading...</div>,
  success: () => <div>Data loaded successfully!</div>,
  error: () => <div>Error loading data.</div>,
};

function StatusComponent({ status }) {
  const ComponentToRender = COMPONENTS[status] || (() => null);
  return <ComponentToRender />;
}

This approach allows you to define your UI components outside the main rendering logic, making it easier to manage and scale as your application grows. You can easily add new states by just adding new entries to the COMPONENTS object.

As your application scales, keep an eye on the complexity of your conditional rendering. It’s easy to fall into the trap of overly complex conditions that can make your components difficult to read and maintain. Strive for simplicity and clarity in your code; sometimes, breaking components down into smaller, more focused pieces is the best approach.

Finally, don’t say goodbye to the power of context for managing state that influences conditional rendering across component trees. Using React’s Context API, you can provide global state that various components can consume, allowing for a more centralized approach to managing UI state.

const ThemeContext = React.createContext();

function ThemedComponent() {
  const theme = React.useContext(ThemeContext);
  return <div className={theme}>Themed content here</div>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedComponent />
    </ThemeContext.Provider>
  );
}

This allows components to react to changes in context, making it easier to manage themes, user authentication states, or any other global state that affects rendering.