svelte

svelte copied to clipboard

Describe the problem

Per https://github.com/sveltejs/svelte/pull/10240#issuecomment-1912206863 — if you have a case like this...

function createCounter() {
  let count = $state(0);
  return {
    get count() { return count },
    increment: () => count += 1
  }
}

let { count, increment } = $derived(createCounter());

...you're creating state inside the derived expression and then depending on that state. When the state changes, the derived expression is re-evaluated, recreating the original state.

Unsurprisingly, this does not do anything useful.

Describe the proposed solution

Creating state inside a derived expression should be an error.

Importance

nice to have

This is complicated. This is only true of primitive state, but for deeply nested state, it's the only way some patterns can work unless you invoke effects to sync state (see my shopping cart REPL example).

I'm not convinced that's true — my fork of that example works without creating state inside deriveds

Simpler example — we decided that we want to prevent reads of state/deriveds created inside the derived, but creating them is okay (they might be class fields etc)