Lists by identity

For renders one row per item. Each row is tied to its item, so when the array is reordered, Solid moves the existing rows instead of rebuilding them:

<For each={cats()}>
  {(cat, index) => (
    <li>
      {index() + 1}: {cat.name}
    </li>
  )}
</For>

The callback gets the item and an index getter. The index is a getter because an item's position can change while its row lives on.

Try it: replace the placeholder item with a For over cats(), and include a text input in each row. Type a note next to Keyboard Cat, then click Rotate cats. The note travels with its cat, because the whole row moved.