-
-
Notifications
You must be signed in to change notification settings - Fork 4.5k
User experience with $effect #14247
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
All of the tracking reductions can be done in user-land by wrapping To prevent deep tracking, wrap any calls in
I do not see that being the case. You are probably just not used to it yet and fail to acknowledge all the rules that came with
|
I’d say that the deep tracking of |
This comment was marked as resolved.
This comment was marked as resolved.
I try to reproduce this:
a & b are watched. Below code will not do the same, because a & are now untracked.
My next idea was to untrack later...
A shorter version could be this:
Can you see, how complicated this is compared to To my surprise... A short example works... I didn't immediately come up with such an idea.
very fascinating and short - missing this in the docs! |
You don't need to store & use temporary variables, e.g. both of these work; $effect(() => {
a, b;
untrack(() => run(a, b))
}) $effect(() => {
run(a, b)
})
function run(a, b) {
untrack(() => c = c + 1);
} Though if the function does not use the args, there is no point in passing the values. |
It works now... . I summarize for now: (1) Make depth scan optional. e.g. new rune or option: (2) Output of the dependency array created (3) Disable tracking completely (4) Better debugging |
This mere spectator's opinion is that it would be amazing if one could obtain the list of signals an effect depends on. It would make debugging next level easier. |
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 scanor vice versa
$effect.near
- for no depth scanor 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
(4) Better debugging:
Output file and position in the event of an error
Importance
would make my life easier
The text was updated successfully, but these errors were encountered: