Lists and keys: A first example

A first example

For runs its callback once per row, not once per render.

For agentsUpdated 2026-10-09

src/todos.tsxtsx

import { useStore } from "@shadow-js/core";
import { For } from "@shadow-js/web";

interface Todo {
  id: number;
  title: string;
}

export function Todos() {
  const [todos] = useStore<Todo[]>([
    { id: 1, title: "buy milk" },
    { id: 2, title: "walk dog" },
  ]);

  return (
    <ul>
      <For each={todos} key={(todo) => todo.id}>
        {(todo) => <li>{todo().title}</li>}
      </For>
    </ul>
  );
}

For runs its callback once per row, not once per render. The callback is untracked: signals read directly in it do not rebuild the row, and the bindings inside the JSX it returns update in place.