How come I need the variable here to trigger the $effect()?

[webJose]

In a rather simple component, I have restProps (the rest of the properties). I need to run an effect whenever any property in this rest changes.

    $effect(() => {
        const newProps = { ...restProps };
        parcel?.update?.(newProps);
        // parcel?.update?.({ ...restProps });
    });

In order to have the above effect work (trigger on property changes), I have to have the newProps variable. If I exchange those two lines with the commented line, then the effect doesn't trigger. I realize that effects don't trigger when triggers lie inside callbacks or after the first await keyword, but as far as I can tell, this doesn't fall into any of those 2 cases, correct?

[brunnerh]

Cannot reproduce a difference in behavior.
Can you provide a full reproduction?

[webJose]

Hello! Hmmm, don't know. It is happening in my project (a Svelte v5-only version of single-spa/single-spa-svelte). I'll see if I can reproduce in a simpler project or REPL. Not that my project is complex, but I get it: The simpler the project, the easier to pinpoint issues.

[webJose]

Ok, I tried to reproduce in the REPL. I cannot. Still, in my project happens consistently. While the project is quite simple, because it is for micro-frontends, testing it requires 3 different projects, so I guess I'll let go for now.

If anyone is curious, the project I speak of is this one.

[webJose]

Hello, everyone that might be remotely interested in the topic. After gaining more experience with Svelte v5 as well as a deeper understanding of how it works, I can finally explain what was happening to me. It is not a bug.

Required Knowledge

Effects, when run, track the signals read while their functions execute. The built list of signals read is not fixed. This list is re-done every time the effect runs..

Effects run at least once, after component initialization, either before the UI updates ($effect.pre) or after.

The Problem In My Code

The only signal in my effect is restProps. On the first run, parcel is undefined, and parcel is not reactive (not a signal). I am not showing that in my original post. This is my mistake.

My component has another $effect() where the value of parcel is obtained. But since this variable is not reactive, it did not get recorded in the list of signals for the effect that uses it, so nothing has changed for that other effect, so that other effect has no reason to re-run.

The correct thing to do here is to make parcel reactive: let parcel =$state<Parcel>();. Now parcel is a signal, and the first run of the effect I did show in my original post will now have a reason to be re-run: The parcel signal got updated.