Lists and conditionals
items.map(...) inside JSX works but creates new nodes whenever the list changes.
items.map(...) inside JSX works but creates new nodes whenever the list changes. For keeps each row, and its
DOM and state, while its item survives:
| Component | Row callback | Rows are matched by |
|---|---|---|
<For each={list}> |
(item, index): item is the value, index is an accessor |
Item reference |
<For each={list} key={(item) => item.id}> |
(item, index): item is an accessor, write item().title |
key(item) |
<Index each={list}> |
(item, index): item is an accessor, index is a number |
Position |
There is no key prop on elements; identity is For's key option. Use Index for lists of primitives where
position is the identity.
Conditional rendering has three forms: Show, Switch with Match, and a plain ternary or && in JSX. The
compiler memoizes the condition of a ternary or &&, so all of them rebuild their branch only when the
truthiness of the condition changes, not on every change of a signal the condition reads. Show adds a
fallback, a callback child that receives the value, and keyed; Switch picks the first truthy Match.
A component that returns a conditional keeps it live when the condition reads a signal or a prop. Early returns
are not live: if (open()) return <A />; return <B />; picks once, when the component is created. Write
return open() ? <A /> : <B />; or use Show.