Skip to content

Commit ead4091

Browse files
authored
docs: diligently describe destructured derived declarations (#16400)
1 parent 45cd000 commit ead4091

File tree

1 file changed

+17
-0
lines changed

1 file changed

+17
-0
lines changed

documentation/docs/02-runes/03-$derived.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,23 @@ let selected = $derived(items[index]);
9494

9595
...you can change (or `bind:` to) properties of `selected` and it will affect the underlying `items` array. If `items` was _not_ deeply reactive, mutating `selected` would have no effect.
9696

97+
## Destructuring
98+
99+
If you use destructuring with a `$derived` declaration, the resulting variables will all be reactive — this...
100+
101+
```js
102+
let { a, b, c } = $derived(stuff());
103+
```
104+
105+
...is roughly equivalent to this:
106+
107+
```js
108+
let _stuff = $derived(stuff());
109+
let a = $derived(_stuff.a);
110+
let b = $derived(_stuff.b);
111+
let c = $derived(_stuff.c);
112+
```
113+
97114
## Update propagation
98115

99116
Svelte uses something called _push-pull reactivity_ — when state is updated, everything that depends on the state (whether directly or indirectly) is immediately notified of the change (the 'push'), but derived values are not re-evaluated until they are actually read (the 'pull').

0 commit comments

Comments
 (0)