Now that an action updates the counter state, derived properties let you compute
values from that state automatically — recalculating only when their dependencies
change. Use .derived() to keep complex logic out of your templates and make
components easier to reason about.
.derived("name", ({ state }) => /* computed value */)The callback receives state, input, and a lifecycle signal. The result is
available in .render() via derived.name() — the same call syntax as state.
You can also write derived.name(value) for optimistic UI; the next time the
derived function runs, it overwrites with the computed result.
.derived() also accepts an async function, making it suitable for data fetching.
Async derived values expose loading, value, and error on the accessor — so
you get built-in async state without reaching for SWR or TanStack Query.
Similar concepts
- React:
useMemo - Vue:
computed() - Svelte:
$derived()