User experience with $effect

[dm-de]

Describe the problem

While beta testing and after porting a Svelte 4 project, would like to share these experiences and recommendations for improvement. I made a similar post before and it was closed very quickly. This post is slightly different. I hope it forms a discussion.

✔️=good / ❌=bad

---

I never had any problems with $: The changes were tracked automatically. There were no infinite loops. It was predictable - with a few extremely rare exceptions that I never encountered. The frustration level was extremely low.

To summarize for $:

✔️ automatic detection of updates, no manual handling of dependencies ✔️ variable changes did not cause infinite loops - and there were no errors that stopped execution ✔️ no deep scan of dependencies ❌ in very rare cases not expected behavior

---

Reacts useEffect.

I think useEffect frustrates people because you have to manually create a dependency array. And if you forget something, it doesn't work. Sometimes it's difficult to work with. But there are few rules and it's predictable.

To summarize for useEffect: ✔️ Few rules and predictable ❌ manual dependency arrays ❌ endless loops possible

---

$effect.

Basic rule: When automatism comes into play - it sometimes becomes unpredictable. While $: managed to find a good balance, this is not yet the case with $effect. It is necessary to learn a lot of rules - and the behavior is often still unexpected. Even though $effect works exactly the opposite of useEffect - the level of frustration is comparable. $effect has even more disadvantages.

To summarize for $effect:

✔️ automatic tracking of dependencies ❌ Endless loops possible - and even stopping the execution ❌ deep scan of dependencies in nested functions (which I see as a disadvantage and it should be optional) - (improvement *1) ❌ non-transparent: you cannot see which dependencies have been created - e.g. with useEffect you can see the dependency array. This was not necessary with Svelte 4 because it was simpler. (Improvement *2) ❌ No good way to completely disable tracking for certain reads (improvement *3) ❌ Very hard to debug. It is not displayed which effect (file and position) triggers an infinite loop and you have to search for it manually. For example, 10 last elements shown - but I couldn't see where it happened because it was even deeper. (Improvement *4) ❌ many rules to learn - I encounted many things, that I don't expected. And still today - I'm not sure to know all gotchas.

Describe the proposed solution

Recommendations for improvements:

(1) Make depth scan optional. e.g. new rune or option: $effect.deep - for depth scan or vice versa $effect.near - for no depth scan or option $effect(fn, deep)

(2) Output of the dependency array created $effect returns an array of the dependency arrays how to display it? $inspect($effect) I am not sure

(3) Disable tracking completely $effect(fn, [var1, var2, notrack...]) or

$effect(() => {
$notrack(var1, var2, notrack...)
...code...
})

(4) Better debugging: Output file and position in the event of an error

Importance

would make my life easier