Loading SvelteCosmos...
“$derived() creates a reactive expression that automatically tracks any $state or other $derived signals accessed within its expression, caching the result until an input changes.”
Pure reactive derivations that lazily calculate and cache values until dependencies mutate.
<script>
let items = $state([10, 20, 30]);
let total = $derived(items.reduce((a, b) => a + b, 0));
let isDiscounted = $derived(total > 50);
</script>
<p>Total: ${total} {isDiscounted ? '(Discount Applied!)' : ''}</p>Modify the state variable below to watch the signal update the output without VDOM diffing:
If dependencies change back to their original value before the next read, $derived skips recalculation entirely.