<Repeat>

<Repeat> renders its children a specified number of times. Unlike <For>, it does not perform list diffing — it simply renders count instances.

import { Repeat } from "solid-js"
import type { JSX } from "solid-js"

function Repeat(props: {
  count: number
  from?: number
  children: (index: () => number) => JSX.Element
  fallback?: JSX.Element
}): JSX.Element

Basic usage

<Repeat count={5}>
  {(index) => <div>Item {index()}</div>}
</Repeat>

Renders:

Item 0
Item 1
Item 2
Item 3
Item 4

Dynamic count

The count prop is reactive. When it changes, the component adjusts the number of rendered instances:

const [rows, setRows] = createSignal(3)

<Repeat count={rows()}>
  {(i) => <tr><td>Row {i()}</td></tr>}
</Repeat>

<button onClick={() => setRows((r) => r + 1)}>Add Row</button>

When to use

Use <Repeat> when:

• You need to render a fixed number of elements (e.g., star ratings, pagination dots, grid cells)
• The content doesn't come from a data array
• You don't need list diffing or keying

Use <For> when:

• You're rendering items from a data array
• Items have identity and may be reordered, added, or removed

Using from

The from prop sets the starting index (default 0):

<Repeat count={3} from={1}>
  {(index) => <div>Page {index()}</div>}
</Repeat>

Renders: Page 1, Page 2, Page 3

Fallback

The fallback prop displays content when count is 0:

<Repeat count={items().length} fallback={<p>No items</p>}>
  {(index) => <div>Item {index()}</div>}
</Repeat>

Props