Selectors

A list that highlights the selected row usually reads the selection in every row. Then each change runs every row's binding. A selector keeps one boolean per key instead, so a change only runs the row that lost the selection and the row that gained it.

const selectedId = new Signal(null);
const isSelected = createSelector(() => selectedId.value);

// In each row
html`<tr class=${() => (isSelected(row.id).value ? 'selected' : '')}>...</tr>`;

isSelected(key) returns a signal that is true while the source equals the key. Read it with .value in a binding. Pass a comparator as the second argument to match another way, such as (id, user) => user?.id === id.

Example

Each Select runs two of the 1,000 row bindings, the row that lost the selection and the row that got it. The first runs one, since no row had it before.