# How to Use a Switch Statement Inside a React Component: 3 Practical Patterns

> Learn to use JavaScript switch statements within React components for conditional JSX rendering. Discover three practical patterns to streamline your code and improve component logic.

- Repository: [Meta/react](https://github.com/facebook/react)
- Tags: how-to-guide
- Published: 2026-02-13

---

**You can use a standard JavaScript `switch` statement inside any React function component to conditionally return different JSX based on props, state, or derived values, exactly as you would in vanilla JavaScript.**

The `switch` statement is a core JavaScript control-flow tool that React developers can leverage to render conditional UI without nested ternary chaos. Because React components are pure JavaScript functions, you can use `switch` at the top level of your component body or inside helper functions to determine what to render. The facebook/react repository itself uses `switch` statements extensively for internal type discrimination, proving the pattern is both safe and idiomatic for production applications.

## Why Use a Switch Statement in React?

When a component must choose between three or more mutually exclusive rendering paths, a `switch` statement offers significant advantages over chained `if-else` or ternary operators.

**Clarity**: A `switch` block explicitly maps values to outcomes, making it easier to scan than nested conditionals.

**Performance**: JavaScript engines optimize `switch` statements to O(1) time complexity in most cases, which is marginally faster than evaluating multiple `if-else` conditions sequentially, though the difference is typically negligible for UI rendering.

**Maintainability**: Adding a new case requires only a single line addition without restructuring existing logic.

## React Switch Statement Implementation Patterns

### Switching on Component Props

The most common pattern uses a `switch` on a prop value to determine which child component to render. This approach creates a clean mapping between data and UI.

```tsx
type Mode = 'list' | 'grid' | 'detail';

interface GalleryProps {
  mode: Mode;
  items: string[];
}

export function Gallery({mode, items}: GalleryProps) {
  switch (mode) {
    case 'list':
      return <ListView items={items} />;
    case 'grid':
      return <GridView items={items} />;
    case 'detail':
      return <DetailView item={items[0]} />;
    default:
      return <div>Unsupported mode</div>;
  }
}

```

### Switching on Component State

You can also drive rendering logic from local state using `switch`, which is particularly effective for multi-step workflows or wizard interfaces.

```tsx
import {useState} from 'react';

export function TogglePanel() {
  const [step, setStep] = useState(0);

  const next = () => setStep(s => (s + 1) % 3);

  switch (step) {
    case 0:
      return <StepOne onNext={next} />;
    case 1:
      return <StepTwo onNext={next} />;
    case 2:
      return <StepThree onRestart={() => setStep(0)} />;
    default:
      return null;
  }
}

```

### Inline Switch Expressions in JSX

For cases where you need a `switch` inside JSX without extracting a helper function, wrap the statement in an immediately invoked function expression (IIFE).

```tsx
export function StatusBadge({status}: {status: 'ok' | 'warning' | 'error'}) {
  const color = (() => {
    switch (status) {
      case 'ok':      return 'green';
      case 'warning': return 'orange';
      case 'error':   return 'red';
    }
  })();

  return <span style={{color}}>{status.toUpperCase()}</span>;
}

```

## How React Uses Switch Statements Internally

The React codebase demonstrates that `switch` statements are a first-class pattern for type-based dispatching. In [`packages/react/src/ReactChildren.js`](https://github.com/facebook/react/blob/main/packages/react/src/ReactChildren.js) at line 174, the implementation uses `switch (type)` to branch handling logic based on child element types. Similarly, [`packages/react-test-renderer/src/ReactTestRenderer.js`](https://github.com/facebook/react/blob/main/packages/react-test-renderer/src/ReactTestRenderer.js) at line 110 employs `switch (inst.tag)` to process test renderer nodes according to their internal tags. The repository also uses `switch` in [`scripts/shared/evalToString.js`](https://github.com/facebook/react/blob/main/scripts/shared/evalToString.js) at line 10 for AST traversal logic, and tests this behavior in [`packages/react/src/__tests__/ReactChildren-test.js`](https://github.com/facebook/react/blob/main/packages/react/src/__tests__/ReactChildren-test.js) at line 617. These examples confirm that `switch` statements are battle-tested within the library itself.

## Summary

- **Standard JavaScript**: A `switch` statement works identically in React components as it does in vanilla JavaScript, requiring no special syntax or hooks.
- **Prop and State Driven**: Use `switch` to map component props or state values to specific JSX outputs for clean, readable conditional rendering.
- **Inline Usage**: Wrap `switch` statements in IIFEs when you need conditional logic directly inside JSX expressions.
- **Production Proven**: The facebook/react source code uses `switch` statements extensively for internal type discrimination, validating the pattern for high-performance applications.

## Frequently Asked Questions

### Can I use a switch statement inside JSX curly braces?

No, you cannot write a raw `switch` statement directly inside JSX curly braces because JSX expressions expect values, not statements. However, you can wrap the `switch` in an immediately invoked function expression (IIFE) or extract the logic into a helper function that returns the value you need.

### Is a switch statement better than if-else in React components?

A `switch` statement is generally clearer than chained `if-else` when you have three or more mutually exclusive conditions based on the same value. For simple binary conditions, `if-else` or ternary operators are often more concise. The performance difference is negligible for rendering, so choose based on readability.

### Does React re-render when the switch case changes?

React re-renders based on state or prop changes, not the control flow statement itself. If the value used in your `switch` statement (such as a prop or state variable) changes, React will execute the component function again and evaluate the appropriate `case`. Ensure you use `key` props when switching between component types to preserve state correctly.

### Can I use switch with React Router for route rendering?

While you can technically use a `switch` statement to conditionally render components based on route data, React Router provides its own `<Switch>` component (or `<Routes>` in v6+) specifically for exclusive route matching. For routing logic, use the library's dedicated components rather than JavaScript `switch` statements to ensure proper URL handling and history management.