How to avoid using $effect to capture the value of a $state before it is updated?

[uyha]

I have the following REPL https://svelte.dev/playground/a09913b55e6444c989daf20451ae6890?version=5.19.7, the main point is I need to be able to remember the previous value of a variable before it is updated. As can be seen in the REPL, I capture the value inside an $effect and "restore" that value to another variable. Is there another way to do this without using $effect? I have no problem with using $effect but seeing it being heavily discouraged makes me feel like I'm doing something wrong.

[brunnerh]

I do not understand that REPL.

For reassignments you could restrict access to the value via a get/set property and record the previous value on change, e.g.

class ValueWithPrevious {
	#previous = $state();
	#current = $state();

	get current() { return this.#current; }
	set current(v) {
		this.#previous = this.#current;
		this.#current = v;
	}

	get previous() { return this.#previous; }
}

let value = new ValueWithPrevious();

Playground

For mutations you do need to watch the value, but this does not really strike me as a $derived value because it cannot necessarily be determined from the current state. It could be if your data is generally modelled as a series of states indexed by time but that is somewhat uncommon (you would also need some immutability for that and in that case you could probably just use the above approach again).

Using an $effect for something like this should be fine. As long as you do not collect many dependencies and modify various state variables at the same time, the potential for trouble is relatively low.