Skip to main content
Advanced Svelte Advanced reactivity Raw state

In previous exercises, we learned that state is deeply reactive — if you (for example) change a property of an object, or push to an array, it will cause the UI to update. This works by creating a proxy that intercepts reads and writes.

Occasionally, that’s not what you want. If you’re not changing individual properties, or if it’s important to main referential equality, then you can use raw state instead.

In this example, we have a chart of Svelte’s steadily increasing stock price. We want the chart to update when new data comes in, which we could achieve by turning data into state...

App
let data = $state(poll());

...but there’s no need to make it deeply reactive when it will be discarded a few milliseconds later. Instead, use $state.raw:

App
let data = $state.raw(poll());

Mutating raw state will have no direct effect. In general, mutating non-reactive state is strongly discouraged.

Edit this page on GitHub

previous next
Key blocks
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<script>
	import { scale } from './utils.js';
	import { poll } from './data.js';
 
	let data = poll();
 
	let w = $state(1);
	let h = $state(1);
 
	const min = $derived(Math.min(...data) - 5);
	const max = $derived(Math.max(...data) + 5);
	const x = $derived(scale([0, data.length], [0, w]));
	const y = $derived(scale([min, max], [h, 0]));
 
	const ticks = $derived.by(() => {
		const result = [];
		let n = 10 * Math.ceil(min / 10);
		while (n < max) {
			result.push(n);
			n += 10;
		}
		return result;
	});
 
	$effect(() => {
		const interval = setInterval(() => {
			data = poll();
		}, 200);
 
		return () => {
			clearInterval(interval);
		};
	});
</script>
 
<div class="outer">
	<svg width={w} height={h} bind:clientWidth={w} bind:clientHeight={h}>
		<line y1={h} y2={h} x2={w} />
 
		{#each ticks as tick}
			<g class="tick" transform="translate(0,{y(tick)})">
				<line x2={w} />
				<text x={-5}>{tick}</text>
			</g>
		{/each}
 
		<polyline points={data.map((d, i) => [x(i), y(d)]).join(' ')} />
 
		<text x={10} y={10} font-size={36}>$SVLT</text>
	</svg>
</div>
 
<style>
	.outer {
		width: 100%;
		height: 100%;
		padding: 2em;
		box-sizing: border-box;
	}
 
	svg {
		width: 100%;
		height: 100%;
		overflow: visible;
	}
 
	polyline {
		fill: none;
		stroke: #ff3e00;
		stroke-width: 2;
		stroke-linejoin: round;
		stroke-linecap: round;
	}
 
	line {
		stroke: #aaa;
	}
 
	.tick {
		stroke-dasharray: 2 2;
 
		text {
			text-anchor: end;
			dominant-baseline: middle;
		}
	}
</style>