How to watch a value and get its previous and current value?

[HuakunShen]

I need something like Vue's watch function that provide previous and current value in callback.
I don't think $effect supports this.
Currently I maintained an extra prev variable $state.

$effect(() => {
    if (prev !== current) {
        // do something
    }
})

[brunnerh]

You can wrap effects to create custom functions that have this functionality.

Something along the lines of:

function watch(getter, effectCallback) {
  let previous = undefined;
  $effect(() => {
    const current = getter(); // add $state.snapshot for deep reactivity
    const cleanup = effectCallback(previous);
    previous = current;

    return cleanup;
  });
}

let value = $state(0);
watch(() => value, previous => {
  // ...
});

Playground

[kvetoslavnovak]

I have just recently published an article on a similar note:
"Helper" Varaibles in Svelte 5

[webJose]

The @svecosystem/runed package has a utility for previous values.

[phocks]

Thank you! These utils are great!