From 71a66dda01d1d3651c9feecbb57c2c0706ded959 Mon Sep 17 00:00:00 2001 From: anthumchris Date: Fri, 4 Jul 2025 23:22:42 -0600 Subject: [PATCH] docs: add $state destructure example using $derived --- documentation/docs/02-runes/02-$state.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/documentation/docs/02-runes/02-$state.md b/documentation/docs/02-runes/02-$state.md index 8e6c91fad769..8e4e06b51ca8 100644 --- a/documentation/docs/02-runes/02-$state.md +++ b/documentation/docs/02-runes/02-$state.md @@ -63,6 +63,17 @@ let { done, text } = todos[0]; todos[0].done = !todos[0].done; ``` +However, if you destructure a reactive value with `$derived`, the references will now be reactive: + +```js +let todos = [{ done: false, text: 'add more todos' }]; +// ---cut--- +let { done, text } = $derived(todos[0]); + +// this will now affect the value of `done` +todos[0].done = !todos[0].done; +``` + ### Classes Class instances are not proxied. Instead, you can use `$state` in class fields (whether public or private), or as the first assignment to a property immediately inside the `constructor`: