#Components

#<For>

Renders a list of items efficiently, with keyed updates based on the identity of the items themselves. This makes it efficient for lists where items are added, removed, or reordered.

Type:

For<T extends readonly any[], U extends JSX.Element>(props: ForProps<T, U>): JSX.Element

Parameters:

• each: An array of items to render or a falsy value
• children: A function that returns the component for each item, receiving the item and a reactive index
• fallback: Optional fallback content when the array is empty

Example:

function ListComponent() {
  const [items, setItems] = useSignal([1, 2, 3])

  return (
    <For each={items()}>
      {(item, index) => (
        <div key={item}>
          Item {index() + 1}: {item}
        </div>
      )}
    </For>
  )
}

#<Index>

Renders a list with index-based tracking for efficient updates. Unlike <For>, it tracks items by their position in the array rather than their identity, which can be more efficient for lists that are frequently updated but not reordered.

Type:

Index<T extends readonly any[], U extends JSX.Element>(props: IndexProps<T, U>): JSX.Element

Parameters:

• each: An array of items to render or a falsy value
• children: A function that returns the component for each item, receiving a reactive getter for the item and the static index
• fallback: Optional fallback content when the array is empty

Example:

function IndexListComponent() {
  const [items, setItems] = useSignal(['a', 'b', 'c'])

  return (
    <Index each={items()}>
      {(item, index) => (
        <div>
          {index}: {item()}
        </div>
      )}
    </Index>
  )
}

#<Show>

Conditionally renders content based on a boolean value. Provides efficient updates when the condition changes.

Type:

Show<T>(props: ShowProps<T>): JSX.Element

Parameters:

• when: A boolean value determining whether to show the content
• children: The content to show when when is true. Can be a JSX element or a function that takes the resolved value of when
• fallback: Optional content to show when when is false
• keyed: Optional flag to associate the block with the value of when, useful when when is an object reference

Example:

function ConditionalComponent() {
  const [isVisible, setIsVisible] = useSignal(true)
  const [user, setUser] = useSignal({ name: 'John' })
  const [theme, setTheme] = useSignal('light')

  return (
    <>
      {/* Basic usage */}
      <Show when={isVisible()} fallback={<p>Not visible</p>}>
        <p>Visible content</p>
      </Show>

      {/* With function children */}
      <Show when={user()}>
        {(userData) => <p>Welcome, {userData().name}!</p>}
      </Show>

      {/* With keyed mode */}
      <Show when={theme()} keyed>
        {(currentTheme) => (
          <div>{currentTheme === 'dark' ? 'Dark Theme' : 'Light Theme'}</div>
        )}
      </Show>
    </>
  )
}

#<Switch>

Renders the first matching case component. Similar to a switch statement, but for JSX content.

Type:

Switch(props: SwitchProps): JSX.Element

Parameters:

• fallback: Optional content to show when no cases match
• children: A list of <Match> components

Example:

function SwitchComponent() {
  const [value, setValue] = useSignal('b')

  return (
    <Switch fallback={<p>Value is something else</p>}>
      <Match when={value() === 'a'}>
        <p>Value is A</p>
      </Match>
      <Match when={value() === 'b'}>
        <p>Value is B</p>
      </Match>
      <Match when={value() === 'c'}>
        <p>Value is C</p>
      </Match>
    </Switch>
  )
}

#<Match>

A component used with <Switch> to define conditional cases.

Type:

Match<T>(props: MatchProps<T>): JSX.Element

Parameters:

• when: A boolean condition determining if this case should be rendered
• keyed: Optional flag to enable keyed mode
• children: The content to render if the condition is true. Can be a JSX element or a function

Example:

function MatchExample(props) {
  return (
    <Match when={props.value === 'a'}>
      <p>Value is A</p>
    </Match>
  )
}

#<ErrorBoundary>

Catches errors in child components and renders a fallback UI. Prevents errors from propagating up the component tree.

Type:

ErrorBoundary(props: ErrorBoundaryProps): JSX.Element

Parameters:

• fallback: A function that returns the fallback UI when an error occurs. It receives the error and a reset function
• children: The child components to wrap

Example:

function ErrorProneComponent() {
  const [triggerError, setTriggerError] = useSignal(false)

  if (triggerError()) {
    throw new Error('Something went wrong!')
  }

  return <button onClick={() => setTriggerError(true)}>Trigger Error</button>
}

function ErrorBoundaryExample() {
  return (
    <ErrorBoundary
      fallback={(error, reset) => (
        <div>
          <p>Error: {error.message}</p>
          <button onClick={reset}>Reset</button>
        </div>
      )}
    >
      <ErrorProneComponent />
    </ErrorBoundary>
  )
}