Solid.js Conditional Rendering — Show, Switch, and Match

In this tutorial, you will learn about Solid.js Conditional Rendering. We cover key concepts, practical examples, and best practices to help you master this topic.

Learn Solid.js conditional rendering: use Show, Switch, and Match components for declarative conditional UI patterns without unnecessary DOM updates.

In this lesson, you'll use Solid.js's built-in control flow components for conditional rendering, replacing ternary expressions with optimized alternatives.

What You'll Learn

How to use <Show> for toggle patterns, <Switch>/<Match> for multiple conditions, and understand why these are better than JavaScript conditionals.

Why It Matters

Solid.js control flow components are optimized for reactivity. <Show> only evaluates the fallback or children, never both, and <For> tracks items by identity.

Real-World Use

Doda Browser uses <Show> for loading states, <Switch> for network status, and <For> for tab lists.

flowchart LR
    A{Condition} -->|True| B[Show Children]
    A -->|False| C[Show Fallback]
    style A fill:#2c4f7c,color:#fff

Show Component

import { Show } from "solid-js";

function UserGreeting({ user }) {
  return (
    <Show when={user()} fallback={<p>Please log in</p>}>
      <h1>Welcome, {user().name}</h1>
    </Show>
  );
}

Switch and Match

import { Switch, Match } from "solid-js";

function StatusBadge({ status }) {
  return (
    <Switch fallback={<p>Unknown status</p>}>
      <Match when={status() === "active"}>
        <p class="active">System is running</p>
      </Match>
      <Match when={status() === "paused"}>
        <p class="paused">System is paused</p>
      </Match>
      <Match when={status() === "error"}>
        <p class="error">System encountered an error</p>
      </Match>
    </Switch>
  );
}

For Component (List Rendering)

import { For } from "solid-js";

function TodoList({ todos }) {
  return (
    <ul>
      <For each={todos()}>
        {(todo, index) => (
          <li data-index={index()}>
            {todo.title}
          </li>
        )}
      </For>
    </ul>
  );
}

Index Component

For arrays where index is the key:

import { Index } from "solid-js";

function FixedList({ items }) {
  return (
    <ul>
      <Index each={items()}>
        {(item, index) => (
          <li>Item {index()}: {item()}</li>
        )}
      </Index>
    </ul>
  );
}

<Index> is for fixed-length arrays where items are accessed by index. <For> is for dynamic lists where items have stable identity.

Common Mistakes

1. Using ternary instead of <Show>: Ternary expressions evaluate both branches. <Show> only evaluates the active branch.
2. Forgetting fallback in <Show>: Without fallback, <Show> renders nothing when the condition is false.
3. Using <Match> without <Switch>: <Match> must be a direct child of <Switch>. Standalone <Match> doesn't work.
4. Not providing a fallback for <Switch>: Without fallback, unmatched conditions render nothing.
5. Using index() as a key: In <For>, index() is reactive. Use it for styling but ensure stable identity via the array items themselves.

Practice Questions

1. When should you use <Show> instead of a ternary? Answer: When only one branch needs evaluation. <Show> is optimized for toggle patterns.

2. What is the purpose of ? Answer: Multiple condition matching. It evaluates <Match> children in order and renders the first matching one.

3. How does <For> differ from <Index>? Answer: <For> tracks items by identity (best for dynamic lists). <Index> tracks by index (best for fixed-length arrays).

4. What happens if no <Match> condition is true? Answer: The <Switch> fallback is rendered. If no fallback is provided, nothing renders.

Challenge

Build a data display component that uses <Show> for loading/empty states, <Switch> for status messages (success, error, warning), and <For> for a data table.

Mini Project

Create a multi-step form wizard using <Switch>/<Match> for step display, <Show> for validation messages, and <For> for repeating form fields.

FAQ

What's Next

Learn about Solid.js List Rendering for advanced list patterns with For and Index.