Give the ability to depend also on the previous value for deriving next value in $derived.by API

[sreekar339339]

Describe the problem

Sometimes a derived value is not only dependent on state but also on its previous value. I propose an addition to the $derived.by API by providing the previous value as a parameter in its callback. $derived.by((previousValue) => { .... })

example code:

export class TicTacToe {
	#board = new SvelteMap()
	player = $derived.by((lastPlayer) => {
		if (this.#board.size) {
			return lastPlayer === 'x' ? 'o' : 'x'
		} else {
			return 'x'
		}
	})
        move(cellId) {
		this.#board.set(cellId, this.player);
		// this.player = this.player === 'x' ? 'o' : 'x' 
// This above line will be avoidable only when previousValue is provided in `$derived.by((previousValue) => {})`
// Otherwise, this.player should be a $state and explicitly updated as above in all the sites it needs to be updated.
	}

let count = $state(0)

let derivedFromCount = $derived.by((prevValue) => {
      if (count < 4) return count * 2
      return count + prevValue * 2 // dependent on state AND its previous value.
})

Directly referencing the derived variable inside the $derived.by() is not allowed and gives an error A derived value cannot reference itself recursively. So providing it as param is the only option.

This would allow newer patterns to compute derived values not possible before. Currently these values are modelled as state and are explicitly updated in all the sites updates need to happen. With the new API, we can turn them into deriveds and make svelte automatically update it.

Describe the proposed solution

I would like to see the previous value provided as the parameter in the callback of $derived.by((previousValue) => {}). The initial value will be undefined.

Importance

would make my life easier

[paoloricciuti]

You can achieve this if you really really need it with

export class TicTacToe {
  #board = new SvelteMap()
  #last;
  player = $derived.by(() => {
    if (this.#board.size) {
      this.#last = this.#last === 'x' ? 'o' : 'x';
    } else {
      this.#last = 'x';
    }
    return this.#last;
  })
  move(cellId) {
    this.#board.set(cellId, this.player);
  }
}

but even better you can just

export class TicTacToe {
  #board = new SvelteMap()

  player = $derived.by((lastPlayer) => {
    return this.#board.size % 2 === 0 ? 'x' : 'o';
  })
  move(cellId) {
    this.#board.set(cellId, this.player);
  }
}

Deriveds should in general be pure functions so it rarely make sense for them to rely on the old value, but when you do there's the first trick. So I'm gonna go ahead and close this, but thanks for reporting.

[sreekar339339]

@paoloricciuti Thanks for your feedback! Deriveds are not "pure" functions even currently no? By definition, "pure" functions should only depend on its parameters, not any external scope variables. This is not the case with derived callbacks anyway. So the purity argument does not apply IMHO.

Although by using an additional variable to store the last value works, I think providing the last value as param is a nice convenience in DX that saves repeated chore work. Declaring the additional variable, reassigning the current value in all code paths like if's, else's, and finally returning that reference is a tedious chore compared to the alternative of making svelte store it automatically and saving the developer from reassigning in all code paths and explicitly returning the reference.

let count = $state(0)
let last
let derivedFromCount = $derived.by(() => {
      if (count < 4) last = count * 2
      else last = count + last * 2 // dependent on state AND its previous value.
      return last
})

The above is a tedious ceremony that needs to repeated in as many deriveds in a codebase that need their prevValue dependency. Instead the below approach is free of repeated ceremony.

let derivedFromCount = $derived.by((prevValue) => {
      if (count < 4) return count * 2
      return count + prevValue * 2 // dependent on state AND its previous value.
})

[paoloricciuti]

The usual for deriveds is to depend on state, not on itself. If you find yourself needing this over and over you can abstract this into an utility but I would probably also rearchitect my code to not depend on the previous value, like I showed you above

[sreekar339339]

Alright, Thanks for your feedback again!