Reactivity inside $effect is confusing

[enguidanos-soluciones-web]

Describe the bug

$effect not executes.

Reproduction

<script>
	let form = $state({
	  name: "",
	});

	$effect(() => {
	  setTimeout(() => console.log($state.snapshot(form)))
	});
</script>

<input type="text" bind:value={form.name} />

Logs

System Info

It's executed on Svelte Playground.

Severity

annoyance

[brunnerh]

Any dependencies that are read asynchronously (like here in setTimeout) will not be tracked (docs on this).
This is a current limitation of the system where signals need to be tracked synchronously to prevent concurrency issues.

(Once async context is standardized & available it should also be possible to track the dependencies in async code.)

[enguidanos-soluciones-web]

It's clear but, ¿which is the way to go when handling async side effects on state changes? For example, you have a big form with hundred of fields and you need to react to the state changes for saving automatically the changes.

I solved this with an interval but doesn't seems "right".

Anyway, i'll wait to the async context.

[brunnerh]

You can read the data synchronously first and defer only the saving of said data.

[enguidanos-soluciones-web]

Well, it's working.

<script>
  let form = $state({
    name: "",
  });

  $effect(() => {
    let form_snapshot = $state.snapshot(form);
    setTimeout(() => console.log(form_snapshot));
});
</script>

<input type="text" bind:value={form.name} />