Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

reset state without using $effect?#16206

Answeredbybrunnerh
MihailsKuzmins asked this question inQ&A
Discussion options

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.

You must be logged in to vote

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, an…

Replies: 1 comment 3 replies

Comment options

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 thetabId is bound, you can also use afunction binding to reset the page/items in the setter, as suggested in the docs you linked to.

You must be logged in to vote
3 replies
@MihailsKuzmins
Comment options

@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(() => {voidtext;return []asMyItem[];});

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

@brunnerh
Comment options

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.

Answer selected byMihailsKuzmins
@MihailsKuzmins
Comment options

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.

Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Category
Q&A
Labels
None yet
2 participants
@MihailsKuzmins@brunnerh

[8]ページ先頭

©2009-2025 Movatter.jp