Request: `$state.snapshot(prop)` suppresses `state_referenced_locally`

[sillvva]

Describe the problem

Currently the solution to assign the initial value of a prop to state is to use a comment to suppress the state_referenced_locally warning.

let { prop } = $props();

// svelte-ignore state_referenced_locally
let value = $state(prop);

Describe the proposed solution

Using $state.snapshot at the root level should suppress the warning, because it signals a clear intent that you want the initial value unchanged.

let { prop } = $props();

let value = $state($state.snapshot(prop));

https://svelte.dev/playground/27f442f9ce0a4e8aa5d8d21c802152d5?version=5.45.5

Use Case

An example use case in forms would be to store the initial data to compare it to the current form values and determine whether the form data has been mutated.

// Form.svelte
let { formData } = $props();

// this should not warn. it already signals intent
let initial = $state($state.snapshot(formData));
const dirty = $derived(!deepEqual(initial, formData));

On the case where you want it to update, like when navigating to the same form on another URL, then you can wrap the form with {#key page.url}{/key} or use an $effect.

$effect(() => {
  void page.url;
  initial = untrack(() => formData);
});

Another benefit of this is that passing deeply nested $state doesn't trigger unexpected updates to the initial value, whereas relying on the comment would cause that to happen.

Importance

nice to have

[sillvva]

I do realize that this works, just $state.snapshot having the same behavior would be nice to have.

let initial = $state(untrack(() => $state.snapshot(formData)));

[singlyfy]

we are also affected by these recent changes..and we have no clue how to fix this:
`
let { json } = $props();

class T {
populate(json){
console.log(json)
}
}

let state = $state.snapshot(json);

let derived = $derived(json);

let t = new T();

t.populate(derived);// json? state? ignore?

`

In above example, calling t.populate() always gives a warning, whatever you try
(json is fetched from the server via server load function and it is just...JSON)

[sillvva]

@singlyfy

1. This issue is for a feature request, not a bug report.
2. Your use case has always shown this type of warning, because you're referencing a reactive $derived value in a non-reactive context. Use $effect.

$effect(() => {
  t.populate(derived)
});

3. Use triple back ticks to show code blocks. Not single back ticks.

[singlyfy]

My use case was this

	let { json } = $props();
	class T {
		populate(json){
			console.log(json)
		}
	}
	t.populate(json);

There is nothing reactive in there....and it doesn't need to be
Using untrack(() => json) seems to work....

[sillvva]

Your original example showed creating $derived value and then referencing it outside a reactive closure. That is what I was referring to.

Also, $props() are reactive. Svelte is not able to infer whether the value that is passed to a prop is a reactive value or not so they are roughly equivalent to a $derived by default.

Please refer to the examples provided in the separate bug report: #17289 (comment)

[ixxie]

Using $state.snapshot at the root level should suppress the warning, because it signals a clear intent that you want the initial value unchanged.

let { prop } = $props();

let value = $state($state.snapshot(prop));

Wouldn't it be great if we added a little syntactic sugar here:

let value = $state.from(prop)

[sted]

I often want to initialize a state variable from a prop, considering its value just the initial value.
Is there another idiomatic way to do this, instead of having to suppress the warning all the time?

I also expected this

let value = $state($state.snapshot(prop));

to work.

I like this

let value = $state.from(prop)

if there are not other existing ways.