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...
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
:
let data = $state.raw(poll());
Mutating raw state will have no direct effect. In general, mutating non-reactive state is strongly discouraged.
<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>