Should I be using a $derived or an $effect here?

[peterreeves]

I'm working on a SvelteKit project that streams a big array of items in chunks to the browser using an AsyncGenerator. I'm trying to make this array in such a way so that it:

1. Can be SSR'd.
2. Is reactive so as more data streams in the UI updates.

Here is part of the core of my setup:
https://svelte.dev/playground/867fe279c37946d2818245b76ebb8812?version=5.34.3
Updating the start number causes the numbers array to recalculate (Imagine that the start parameter is page data from a SvelteKit load function, and the sleep calls are the array waiting for the next piece from the server side AsyncGenerator).

I've had success by putting $state inside a $derived.by ages ago, but it seems some recent updates have broken that for me. I started getting state_unsafe_mutation errors.

Turns out by wrapping the state update in untrack helps, though I don't completely understand why. It seems something to do with this discussion? https://svelte.dev/playground/867fe279c37946d2818245b76ebb8812?version=5.34.3

After poking around on the docs for untrack and state_unsafe_mutation I noticed that the latter says "If side effects are unavoidable, use and $effect instead": https://svelte.dev/docs/svelte/runtime-errors#Client-errors-state_unsafe_mutation

Is what I'm trying to do here considered a "side effect"? Should I be using an $effect to update my array instead of trying to use $derived.by?

[7nik]

state_unsafe_mutation error is a bug #16164, though the fix is not released yet.

[peterreeves]

Thank you!