reset state without using $effect?

[MihailsKuzmins]

First of all, sorry if such a question has already been asked, but I have not found a similar discussion.
In Svelte 4 I had the following code:

$: tabId, (pageIndex = 0), (items = []);

Now I want to write it in Svelte 5, but the only thing I was able to produce is:

$effect(() => { 
	if (tabId) {
		pageIndex = 0;
		items = [];
	}
});

However, When not to use $effect says that $effect should not be used for updating state, so I am wondering, how I can migrate this functionality to Svelte 5 correctly.

[brunnerh]

You could try to use $derived for this, but that is generally for synchronizing dependent state while this looks more like something that belongs in a tab change event or similar. If the tabId is bound, you can also use a function binding to reset the page/items in the setter, as suggested in the docs you linked to.

[MihailsKuzmins]

@brunnerh Thank you for your reply. The only thing I was able to come up with is as follows:

const { text }: MyProps = $props();

let pageIndex: number = $derived(text.length & 0);
let items: MyItem[] = $derived.by(() => {
	void text;
	return [] as MyItem[];
});

Do you think it is valid / acceptable? Or is there a better way?

[brunnerh]

If you want deep reactivity on the items you would need to wrap the array in $state.
This also splits logic that is coupled, so I probably would not go with this if events or function bindings cannot be used. (You could maybe bundle both variables into a single object, though that might not be the logical thing to do depending on context.)

Note that just using an $effect for this is really is not much of an issue. For certain things, like synchronizing a local, mutable variable from a prop, $effect has actually been recommended for some time (now that $derived can be overwritten, you don't need that any more).

So compared to the $derived approach, I find the $effect code to be cleaner, and as long as you don't create complex dependencies, which could lead to infinite loops, this should not be a problem either.

[MihailsKuzmins]

Thanks, the $effect approach was working well without any unexpected behaviour, I was just curious that any state updates are discouraged, but it seems not to be the case. Then I will use $effect in this case.