List Rendering

Simple Lists with .map()

import { signal, ul, li } from "@whisq/core";

const items = signal(["Apple", "Banana", "Cherry"]);

ul(
  () => items.value.map(item => li(item))
)

each() — Efficient Keyed Lists

For large or frequently-changing lists, each() with a key function reuses DOM nodes:

import { signal, each, ul, li, span, button } from "@whisq/core";

const todos = signal([
  { id: 1, text: "Learn Whisq" },
  { id: 2, text: "Build an app" },
]);

ul(
  each(() => todos.value, (todo) =>
    li(
      span(todo.text),
      button({ onclick: () => remove(todo.id) }, "x"),
    ),
    { key: (todo) => todo.id },
  ),
)

When to Use Which

Approach	Use When
.map()	Small lists, rarely changing
each() without key	Medium lists, index identity
each() with key	Large lists, reorderable items

🐱 Whisker Tip

Always use each() with a key when items have a stable identity. This preserves DOM state (focus, scroll, animations) across updates.

Common Mistake

// ❌ WRONG — mutating won't trigger updates
items.value.push(newItem);

// ✅ RIGHT — create a new array
items.value = [...items.value, newItem];

Next Steps

• Lifecycle — Hooks for mount, cleanup, async data