I want to set a Vairable only once when a $State variable changes

[Keshav-writes-code]

Minimal Reproducable Setup

<script lang="ts" >
	let data = $state(["hello", "world", "this", "gives", "me", "a", "headache"]);
	let isChanged = $state(false)
	$effect(() => {
		data; // To trigger the rerun on data change 
		isChanged = true
	});
</script>

{#each data as item, i}
	<input type="text" bind:value={data[i]} />
{/each}
<p>{isChanged}</p>

in this Setup, the value diaplyed for isChanged is always true but i want it to be only true when the data rune changes

[brunnerh]

You could add a utility flag:

let isChanged = $state(false)
let mounted = false;
$effect(() => {
	$state.snapshot(data);
	if (mounted)
		isChanged = true

	mounted = true;
});

Playground

Logic like this could be extracted to a separate function in a .svelte.js file.

The callback added in this PR might also help later:

• feat: add onchange option to $state #15069

[Keshav-writes-code]

thanks man!

[Ocean-OS]

$state variables are proxied and then check for referential equality to see if they change. As a result, you'd need to enumerate through all of the properties, like this.