counter for state update

[shevernitskiy]

I want count component state updates, which will be a part o f render logic.

Here is basic sketch:

<script>
  let data = $state([]);
  let counter = $state(0);
  
  $inspect(data).with((type, value) => {
    if (type === "update") {
      counter++;
      console.debug("state", type, value, counter);
    }
  });
</script>

<div class:hidden={counter > 0}>updates: {counter}</div>
...rest of the html based on data...

This approach triggers classic circular dependency. I've tried make counter not $state but simple value - it's not updated in html. I've tried incement counter inside untrack - not help.
So how can i track my data state mutated, and render logic on it?

[brunnerh]

$inspect is just for observing state and only exists during development.
You probably would want to use a regular $effect in combination with $state.snapshot, e.g.

<script>
	import { untrack } from 'svelte';

	let data = $state([]);
	let counter = $state(-1);

	$effect(() => {
		const value = $state.snapshot(data);
		const newCount = untrack(() => counter) + 1;
		counter = newCount;

		if (newCount == 0)
			return;

		console.log("state", value, newCount);
	});
</script>

<button onclick={() => data.push(data.length)}>+</button>
<div>{JSON.stringify(data)}</div>

{#if counter}
	<div>updates: {counter}</div>
{/if}

REPL

[shevernitskiy]

Thanks a lot, works perfectly!