Solid.js List Rendering — For and Index Components

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

Learn Solid.js list rendering: use For and Index for efficient list rendering, handle dynamic lists, and optimize performance with keyed updates.

In this lesson, you'll render lists with <For> and <Index>, understand keyed vs unkeyed rendering, and handle dynamic list mutations.

What You'll Learn

How to use <For> for keyed list rendering, <Index> for index-based rendering, add/remove/reorder items, and optimize list performance.

Why It Matters

Efficient list rendering is critical for performance. <For> updates only the changed items instead of recreating all DOM nodes.

Real-World Use

Doda Browser's tab bar uses <For> to render tabs. Adding or removing a tab updates only that one tab's DOM node.

flowchart LR
    A[Array Signal] --> B[For Component]
    B --> C[Item 1]
    B --> D[Item 2]
    B --> E[Item 3]
    C --> F[DOM Node]
    D --> G[DOM Node]
    E --> H[DOM Node]
    style B fill:#2c4f7c,color:#fff

Basic For Loop

import { For } from "solid-js";

function NameList() {
  const [names, setNames] = createSignal(["Alice", "Bob", "Charlie"]);

  return (
    <ul>
      <For each={names()}>
        {(name, index) => (
          <li>
            {index() + 1}. {name}
          </li>
        )}
      </For>
    </ul>
  );
}

Adding and Removing Items

function DynamicList() {
  const [items, setItems] = createSignal([1, 2, 3]);
  let nextId = 4;

  return (
    <div>
      <button onClick={() => setItems([...items(), nextId++])}>
        Add Item
      </button>
      <button onClick={() => setItems(items().slice(0, -1))}>
        Remove Last
      </button>
      <ul>
        <For each={items()}>
          {(item) => <li>Item {item}</li>}
        </For>
      </ul>
    </div>
  );
}

Index Component

import { Index } from "solid-js";

function TableRow({ row, columns }) {
  return (
    <tr>
      <Index each={columns()}>
        {(column) => <td>{row()[column()]}</td>}
      </Index>
    </tr>
  );
}

Keyed vs Unkeyed

Use <For> when items have stable identity (IDs). Use <Index> when items are fixed-length or identity isn't meaningful.

Common Mistakes

1. Using .map() instead of <For>: .map() recreates all DOM nodes. <For> only updates changed items.
2. Not providing a stable key: <For> uses the item itself as key. For objects, ensure references are stable.
3. Mutating the array in place: push() and splice() don't trigger updates. Always return a new array.
4. Using index as key: index() is reactive but doesn't track identity. Adding an item shifts all indices.
5. Nesting <For> components: Nesting is fine but ensure each level has its own each prop.

Practice Questions

1. When should you use <For> vs <Index>? Answer: <For> for dynamic lists with stable item identity. <Index> for fixed-length arrays or when index is the natural key.

2. How does <For> know which items changed? Answer: It tracks items by reference identity. Each item in the array is compared to the previous array's items.

3. What happens when you add an item to the middle of a list? Answer: <For> inserts only the new item's DOM node. Existing nodes are not recreated.

4. How do you remove an item from a list? Answer: Create a new array without the item: setItems(items().filter(item => item.id !== id)).

Challenge

Build a sortable todo list where items can be added, removed, reordered (move up/down), and each operation only updates the necessary DOM nodes.

Mini Project

Create a data grid component that renders rows with <For>, columns with <Index>, supports sorting by clicking column headers, and highlights the sorted column.

FAQ

What's Next

Learn about Solid.js Forms for building forms with reactive signals and validation.