lustre/stylish/keyed

Keyed layout elements for efficient list rendering.

When rendering dynamic lists that can be reordered, added to, or removed from, using keyed elements helps the rendering engine efficiently update only what changed.

Each child is associated with a unique string key. When the list changes, elements with matching keys are preserved and reused, avoiding unnecessary re-renders.

When to Use Keys

• User can delete items from a list
• User can create new items in a list
• Lists can be sorted or reordered
• List updates are frequent

When NOT to Use Keys

• Static lists that never change
• Lists that only append new items
• Small lists (< 10 items) that fully re-render quickly

Example

import lustre/stylish as el
import lustre/stylish/keyed
import gleam/list

pub fn todo_list(todos: List(Todo)) {
  let keyed_todos = list.map(todos, fn(todo) {
    #(todo.id, el.row([], [
      el.text(todo.title),
      delete_button(todo.id),
    ]))
  })
  
  keyed.column([], keyed_todos)
}

pub fn column(
  attrs: List(@internal Attribute(@internal Aligned, msg)),
  children: List(#(String, stylish.Element(msg))),
) -> stylish.Element(msg)

let items = list.index_map(todos, fn(todo, idx) {
  #(int.to_string(idx), todo_view(todo))
})
keyed.column([el.spacing(5)], items)

pub fn el(
  attrs: List(@internal Attribute(@internal Aligned, msg)),
  child: #(String, stylish.Element(msg)),
) -> stylish.Element(msg)

keyed.el([], #("item-1", child_element))

pub fn row(
  attrs: List(@internal Attribute(@internal Aligned, msg)),
  children: List(#(String, stylish.Element(msg))),
) -> stylish.Element(msg)

let items = [
  #("a", el.text("First")),
  #("b", el.text("Second")),
  #("c", el.text("Third")),
]
keyed.row([el.spacing(10)], items)