What is the "right" way to update an instance of a reactive thing based on props changing.

[kwangure]

I want to use $effect but docs say not to use it to update/synchronize state. I also do not want to recreate the instance of the "reactive thing" with the assumption that it's expensive...and I want to preserve the in memory state of the instance.

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACo1S227bMAz9FUILECeILSxAX5I4QLe-7Af2Mg-FY9ONCkcSJNppYfjfB1m-BenW6UkiD8lzqNOwQpRo2e5Xw2R6QbZjj1qzDaN37R62xpKQbZhVlclc5GAzIzQdE5mQuGhlCJ5UdSrRQGHUBZYR79-RL17uE-nAJRLI6nJCAzE87BN54FMreRBSVwRubJwwj0sYnITMd3VaVhg3Pth6-DDzNsePbMMuKheFwJztyFTYbkZlfc3_qQMA6PU1gG8apRU1fjeYEg7D21FyNo_3wqNX67W7Vk5949lCCzEstFHaBisHIJ_OffVXiP8yLxgbrPqdAvA1gLu5O8CTyizY9B2kIiAFuQI6Cxt5Du6cibTdce4phg-hNlgLvEY1mgzLKNWa5yqz3FQS7ZcFFgVmFF7PKEOpKCQVVhbDPu77rrnn0geDYAXxEZqJ1qAs8vRjL2PvAb0Yh-Nr-AG5kkuCayrnCuCEWVpZBEFLO61nHD3b39ZtN0cjasyDTxe5ujOiPv7scsJC06FaOHB97DK-Hh675KjKX-5h3-aw7Q3sXzb9yEuTZ1_t3K_41jm0qGRGQsnPjeO_BYBz0AYJZQ50RouQGpztVWk0qetoJ_s-D7-3sJQSBt3T7W8AeIHz9fcla9gOjk3IIFVGDvZI6AXJswtWU3CEPc-tklC7GW52LKtv6kaW9V0RwMvI8sNhPjXV9QZNZHv_X7_bP9Jm3g88BQAA

[brunnerh]

For an object that needs to react to outside changes, I would pass a function pointing to state (for read-only state) or a boxed value (so there is a getter/setter - the $state proxy would already provide this for objects).

Read-only example:

let doubler = expensiveCreateDoubler({ value: () => value });

export function expensiveCreateDoubler({ value }) {
	let double = $derived(value() * 2);

	return {
		get value() {
			return value();
		},
		get double() {
			return double;
		}
	}
}

Read-write example:

let doubler = expensiveCreateDoubler({
	get value() { return value },
	set value(v) { value = v },
});

export function expensiveCreateDoubler(options) {
	let double = $derived(options.value * 2);

	return {
		get value() {
			return options.value;
		},
		set value(value) {
			options.value = value;
		},
		get double() {
			return double;
		}
	}
}

(This does not look like good design, though.)

Using $effect can be OK when dealing with properties, an additional utility may be introduced to make one-way updates from properties to state easier.

[kwangure]

I'll probably need to run into this a few times before it sinks into my finger tips...but I get it.

You could guess to write the output once you understand that property accesses in context register dependencies. Like in SolidJS or Preact.

export default function Doubler($$anchor, $$props) {
	$.push($$props, true);
	let doubler = expensiveCreateDoubler({ value: () => $$props.value });
	...

The input I feel like I have to "just know" what the output might in order to reason about the signal dependencies. It's not guessable.

let { value } = $props();
let doubler = expensiveCreateDoubler({ value: () => value });

For example, I imagine that LLMs might struggle with coming up with this as a solution when presented with the problem.

[kwangure]

Using $effect can be OK when dealing with properties

As a note to self, if you must use an effect, you should probably use $effect.pre, since the $effect for properties would run after the DOM update, so it would need an extra DOM update for the changes caused by the $effect.

[kwangure]

Documenting my updated thoughts. You may fact-check my thinking.

This is like the case of controlled vs uncontrolled components & props vs state.

• Controlled components receive their state from their parent. They may request changes to that data but they don't actually control it.

<button onclick={() => $$props.pleaseChangeCount($$props.count + 1)}>
    {$$props.count}
</button>

• Uncontrolled components own their data and modify it directly.

For example, a devout follower of the controlled component religion would "fix" the read-write example so that you're more explicit about changing data you don't own. This might also reduce the probability that consumers instinctively try to expensiveCreateDoubler({ value }).

export function expensiveCreateDoubler(options) {
	let double = $derived(options.value * 2);

	return {
		get value() {
			return options.value;
		},
		set value(value) {
			options.prettyPleaseChangeValue(value);
		},
		get double() {
			return double;
		}
	}
}

It seems like in order to use the reactive object pattern (e.g. in a headless library), for some input values you must account for or even require a controlled reactive object in order to accommodate the case where the input value is passed down directly from props as in the OP...because while other state updates are typically associated with some event + handler, there's of course no propchange event. Svelte makes this strategy a bit hard because there's no Signal<type> type that you can use to enforce this since signals are transparent.

export interface ControlledDoublerOptions {
    readonly value: number;
    prettyPleaseChangeValue(value: number): void;
}

Alternatively, you could create an uncontrolled reactive object, like I had done (and I imagine most people would first try to do)...where the consumer may need to use $effect.pre to update its properties for inputs that come from $props.

I'm leaning towards the uncontrolled objects + effect direction. It has a better progressive disclosure of complexity:

• The onpropchange situation is less common and you shouldn't be penalized until you run into it later and learn about the need for $effect.pre.
• Consumers don't need to immediately understand the implementation of expensiveCreateDoubler i.e. know which values must, can or shouldn't be reactive. They can check the implementation/docs later when they need to update a specific value.

[brunnerh]

Never heard of or used this "controlled vs uncontrolled" distinction, not sure it's all that useful 🤔.

The get/set pair property is a bit opaque, but I think that at least for the read-only case, passing a function is pretty straightforward (here the intent will also be more apparent from the type).

I have seen advocacy for splitting the setter into a separate function, but this comes with drawbacks, e.g. the property can no longer be used with bind: syntax, and if the get part is not an accessor/function, you need to update the value separately.

Personally, I would rather use some option naming convention or make requirements/usage clear in the documentation which should be easily accessible directly in the IDE. It may still be a bit too early to tell what the best practice should be.

[kwangure]

The latest version of the $state.link rune (before it was removed) used a pattern that solves our problem here cleanly.

The solution.

export function stateLink(getValue) {
	let wasLocal = false;
	let localState = $state(undefined);

	// Choose `localState` as the latest value if the mutation was local
	// Otherwise, choose the linked `getValue()` because the change was a reaction
	const linkedDerived = $derived.by(() => {
		const linkedValue = getValue();
		if (wasLocal) {
			wasLocal = false;
			return localState;
		}
		return linkedValue;
	});

	return {
		get current() {
			return linkedDerived;
		},
		set current(v) {
			wasLocal = true;
			localState = v;
		},
	};
}

The original example problem solved using said solution:
https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACo1TTWvbQBD9K4MoRC7GooVebMtQkksh0ENpLlXBa2lkbyLvLrsjOUHov5f90FfihN7knZn3Zt57bqOSV2ii9Z82EuyM0Tr6rlS0jOhF2R-mwYowWkZG1jq3L1uTa65ol4mM-FlJTXAn60OFGkotz3CzSsLvlR--2WTCNldIIOrzATWk8G2TiW0yQoktF6omsLRpFvm-LIIDF8W6YVWNaesfO9_ec85ryS4T0TI6y4KXHItoTbrGbjncFqb-7z4AgHBhC_isUBje4K1GRtjTd8PR-fQ9nL56NP56C2Xvb_2-0EEKn5SWysSLIE9GSQK_DQKDIxKhhssJBfyACxMEnIAkaGS5-9g7mL2d88CF5_0C6Tubxi14loyOSH6NeAFtRhqp1qJfzDd1izf-qN2D6-AGWtfbwTZRO1fxHK7UL7LyH77pI0uu6Tb682im3gxuGGKE91w8TQwY3l6Lj89uqqxFTlyK9wSSylaN1WTwy4uSjnxxvIB0B6F35erOQQJIElAaCUUBdOLGysEmbCAVambnRnwvkg1DgZo3WMQOcZXXWqMg-Axfx3wEo9rrPobHuZ890KYvd8v-ywzTzWx8vkAKzZtZsAENq1-l9qVxLmQqE91HQXjt33sheG3n6M0RyWU07GQFvjBzL3NWQQolq4xfyhYq-_rLjlr1HUZciwJLLrDoNU8SuD1JaRD2Y_8emAE6IVSM0PQZ4aV7O9fkLLbEniPg_KQT6gs3uITcQzoILp6wgH2_ebzYwwFzVod6fmLiiA6M-X-_i09GuRSGwvidj84kRavDSwhqMGfa_hAyPXIGp3gJca_XxNarEk7cHpXZDEZPyyOpq3e9uPM420iF0E0zNQMJh_Y0IY5mMtlc39smbVh75nwzA-s2VzP6t_sHgJ3reScHAAA=