Reusing objects in derived expressions weirdness

[peterreeves]

So I was experimenting with re-using objects in $derived.by functions to avoid allocating new objects (I'm animating 3D objects with requestAnimationFrame, I generally try to avoid unnecessary allocations).

I now realize that returning the same object every time is an issue because the derived does an equality check and thinks that the value hasn't changed.

However, while experimenting I hit this case that I don't understand:
https://svelte.dev/playground/25b30a6dd785464bab9f3de823969c29?version=5.1.3
This setup has two derived objects: one that tries to reuse an existing object, and one that returns a new object every time (The "correct" way). But to my surprise, both values update the UI when the slider is dragged. However when the bottom paragraph element is commented out, the value of the re-used one no longer updates.

Why does having the second one enabled cause both to update? And on a broader level, is reusing objects in deriveds like this a potential performance improvement? Or are there unavoidable issues with this and I should just bite the bullet and allocate every frame?

[brunnerh]

If you look at the compiled code you will find this:

	$.template_effect(() => {
		$.set_text(text_1, `dimensions re-use: ${$.get(dimensionsReuse).width ?? ""}`);
		$.set_text(text_2, `dimensions new: ${$.get(dimensionsNew).width ?? ""}`);
	});

Updates are batched, it updates as a side effect of the other derived. So if you want reliable updates, you need a new object.

There might be other ways, e.g. using state + effect but I don't know if they are any better.

[peterreeves]

The update being batched like that surprises me. I thought that goes against the whole point of fine grained reactivity? Is there a reason the compiler generates only one template_effect rather than two?

I've thought about using state + effect, but then I feel I'd lose the property of things updating in a predictable order. Oh well, I guess I just always return new objects for now, and if it starts to become a performance problem I'll open an issue.

[brunnerh]

Batching limits the number of active effects. The fine-grained reactivity is mostly relevant for {#each} where it prevents the entire list from being invalidated when one item changes.