javascript / expert
Snippet
Reactivity Opt-out with Object.freeze
Svelte's proxy-based reactivity recursively observes objects. For massive read-only datasets, this process can be prohibitively expensive. Object.freeze signals to Svelte that the data is immutable, bypassing proxy creation and saving significant CPU and memory.
snippet.js
javascript
1
2
3
4
5
6
7
const rawData = await fetch('/api/large-dataset').then(r => r.json());// Prevent Svelte from recursively making this array reactiveconst dataset = $state({items: Object.freeze(rawData.map(Object.freeze)),selectedId: null});
svelte
Breakdown
1
Object.freeze(rawData.map(Object.freeze))
Freezes both the array and its individual items to ensure total immutability and zero reactivity overhead.
2
$state({ ... })
Only the top-level object properties remain reactive, while the frozen items are treated as static values.