From 4a22d8345b43bd84b1f05a6b8f9468ed388fa349 Mon Sep 17 00:00:00 2001 From: sean <135666428+seantiz@users.noreply.github.com> Date: Mon, 23 Jun 2025 18:01:43 +0100 Subject: [PATCH] docs: Add prominent link to svelte/reactivity from state --- documentation/docs/02-runes/02-$state.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/documentation/docs/02-runes/02-$state.md b/documentation/docs/02-runes/02-$state.md index 8e6c91fad769..f9e647fb84e3 100644 --- a/documentation/docs/02-runes/02-$state.md +++ b/documentation/docs/02-runes/02-$state.md @@ -63,6 +63,12 @@ let { done, text } = todos[0]; todos[0].done = !todos[0].done; ``` +### State for Collections + +Arrays aren't the only structure you might want to use when setting reactive state for a collection of items. The temptation is to reach for Javascript built-in classes like `Set`, `Map`, `URL` and wrap them in `state()`, but this approach won't work. + +Use Svelte's own reactive versions instead. You can import `SvelteSet`, `SvelteMap`, `SvelteURL` and other reactive classes in [`svelte/reactivity`](svelte-reactivity). + ### 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`: