can you make a js Set, a state in svelte

[Keshav-writes-code]

something like this : playground

  let set: Set<string> = $state(new Set());

it doesn't work but is there a way to make it work

[Keshav-writes-code]

nevermind, found built in solution, SvelteSet

[Nickalus12]

Yeah, the standard Set isn't deeply reactive in Svelte 5 because Svelte uses proxies for $state, and built-in collection types like Set and Map don't behave the same way as plain objects or arrays when proxied. If you just do set.add('foo'), Svelte won't see that as a state mutation because the object reference stays the same and the internal method doesn't trigger a "set" operation on the proxy.

The simplest fix is to use Svelte's built-in SvelteSet from svelte/reactivity. It's a reactive wrapper that mirrors the standard Set API but hooks into Svelte's fine-grained reactivity.

import { SvelteSet } from 'svelte/reactivity';

let set = new SvelteSet(['a', 'b']);

// This will now trigger UI updates automatically
function add(val: string) {
	set.add(val);
}

If you really want to stick to a native Set with $state, you have to treat it as immutable and re-assign it every time you change it, which is usually more boilerplate than it's worth:

let set = $state(new Set<string>());

// You have to trigger an assignment
function add(val: string) {
	set.add(val);
	set = new Set(set); 
}

Stick with SvelteSet or SvelteMap for this—they were added specifically to solve this gotcha.