Skip to main content

Advanced Conditional Rendering: Switch & State Machines

Advanced conditional rendering uses switch statements and controller component patterns to elegantly handle components with multiple distinct states (loading, success, error) instead of nested ternaries. These techniques keep your JSX clean and maintainable as application complexity grows.

Key Takeaways​

  • A switch statement is cleaner than nested ternaries when a component has 3+ distinct states (e.g., loading, success, error)
  • Controller components encapsulate conditional logic by rendering different child components based on props—a foundation of modern data-fetching patterns
  • null is the explicit way to make a React component render nothing
  • Choose the right tool for each situation: ternaries for inline binary choices, && for "show or hide," switch or if/else for complex multi-state logic

The Core Concept: From Conditions to Component States​

As your application grows, you will often find that a component does not just have two states (like "on" or "off"), but many. For example, a data-fetching component might have states like 'loading', 'success', 'error', or 'idle'. These represent distinct UI outputs that need to render completely different content.

Trying to manage this with nested ternary operators would be unreadable:

{status === 'loading' ? <Spinner /> : (status === 'success' ? <Data /> : <Error />)}

This nested chain is hard to maintain and becomes worse with each new state. A much cleaner approach is to use more structured JavaScript logic, like a switch statement or early-return if blocks, to handle these multiple states gracefully.

Using a switch Statement for Multiple Conditions​

A switch statement is a clean way to handle a component that needs to render a different output for several different string or number values. This pattern represents a simple state machine in code.

Let us build a Notification component that can display different messages based on a status prop: 'info', 'success', 'warning', or 'error'.

import React from 'react';

function Notification({ status, message }) {
  // Use a switch statement to determine which component to render
  switch (status) {
    case 'info':
      return <div className="info-box">{message}</div>;
    case 'success':
      return <div className="success-box">{message}</div>;
    case 'warning':
      return <div className="warning-box">{message}</div>;
    case 'error':
      return <div className="error-box">{message}</div>;
    default:
      // It's good practice to have a default case,
      // which can render nothing or a generic message.
      return null;
  }
}

export default function App() {
  return (
    <div>
      <Notification status="success" message="Profile updated!" />
      <Notification status="error" message="Connection failed." />
    </div>
  );
}

Code Breakdown:

  1. switch (status) — Evaluate the status prop against each case
  2. case '...' — Each case corresponds to a possible value of the status prop
  3. return <...> — Inside each case, return the appropriate JSX for that status (early return pattern)
  4. default: return null; — Handle unexpected values by rendering nothing

This pattern is far more readable and scalable than a series of nested ternaries. It becomes especially valuable when you have 4+ states.

Creating a Multi-State Controller Component​

A powerful pattern in React is to create a single component that acts as a controller, rendering different child components based on props. This encapsulates the conditional logic and keeps the parent component clean. This is the foundation for data-fetching libraries like React Query and SWR.

Let us imagine a DataDisplay component that handles loading, success, and error states.

import React from 'react';

// Individual state components
const LoadingSpinner = () => <p>Loading...</p>;
const ErrorMessage = ({ error }) => <p>Error: {error.message}</p>;
const SuccessData = ({ data }) => (
  <ul>
    {data.map(item => <li key={item.id}>{item.name}</li>)}
  </ul>
);

// The main controller component
function DataDisplay({ status, data, error }) {
  if (status === 'loading') {
    return <LoadingSpinner />;
  }

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

  if (status === 'success') {
    return <SuccessData data={data} />;
  }

  // Default case, render nothing
  return null;
}

export default function App() {
  // In a real app, these values would come from a data fetching hook
  const status = 'success';
  const data = [{ id: 1, name: 'React' }, { id: 2, name: 'JSX' }];
  const error = null;

  return <DataDisplay status={status} data={data} error={error} />;
}

How it Works:

  • We create small, focused components for each state (LoadingSpinner, ErrorMessage, SuccessData), each with a single responsibility
  • The DataDisplay component acts as a "router"—its only job is to look at the status prop and render the correct child component, passing along the relevant props (data or error)
  • The App component's logic remains simple. It just needs to know the current status and pass it down
  • This pattern is extremely common and is the foundation for how modern data-fetching libraries work in React (React Query, SWR, TanStack Query)

Choosing the Right Conditional Rendering Technique​

You now have several tools for conditional rendering. Here is a quick guide on when to use each one:

  • Ternary Operator (? :) — Best for simple, inline conditions where you choose between two small expressions
    • Example: {isLoggedIn ? 'Log Out' : 'Log In'}
  • Logical AND (&&) — Best for the "show or show nothing" scenario
    • Example: {hasMessages && <NotificationBadge />}
  • if/else or switch with Early Returns — Best for components that have multiple, distinct render outputs; great for clarity when the logic is complex
    • Example: The DataDisplay component above (3+ states)
  • if/else with a Variable — Best when only a small part of a larger component is conditional, and you want to avoid duplicating the surrounding JSX

Frequently Asked Questions​

What is the difference between a switch statement and nested ternaries?​

A switch statement is more readable when you have 3+ distinct conditions. Each case is explicit and the default case handles unknown values clearly. Nested ternaries become confusing quickly: a ? x : (b ? y : z) is hard to parse. Switch is preferred for multi-state logic.

Should I put conditional logic in the parent component or a child component?​

If the logic is about rendering different child components entirely (e.g., loading vs. success vs. error), move the logic to a dedicated controller component (like DataDisplay). This keeps parents focused on business logic and children focused on rendering. This separation of concerns makes code easier to test and reuse.

What does return null do in React?​

return null tells React to render nothing. The component mounts but produces no DOM element. This is the explicit, preferred way to conditionally hide a component. It is equivalent to not rendering the component at all.

Can I use a switch statement inside JSX?​

No, not directly. You cannot write {switch (x) { ... }} inside JSX curly braces. Switches are statements, not expressions. Solutions: (1) use a switch at the top of the component and assign the result to a variable, (2) use a ternary or && operator inline, or (3) extract the logic into a separate function that returns JSX.

When should I create a controller component?​

Create a controller component when you have a piece of data or logic that multiple child components depend on. The controller owns the state or logic and renders the appropriate children. This is useful for forms, data fetching, modals, and any multi-state UI pattern.

Further Reading​

Glossary​

  • Controller Component: A component whose primary purpose is to manage logic and render other components based on that logic, rather than rendering significant UI itself.
  • State Machine: A behavioral model where a component can be in one of a finite number of states. A switch statement is a common way to implement a simple state machine in code.