Derived

Now that you can mutate state with .on(), 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 the component context, just like .on(). 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()