Skip to content
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

Reactivity ordering breaks reactivity #7612

Closed
noah-integrityinspired opened this issue Jun 16, 2022 · 2 comments
Closed

Reactivity ordering breaks reactivity #7612

noah-integrityinspired opened this issue Jun 16, 2022 · 2 comments

Comments

@noah-integrityinspired
Copy link

noah-integrityinspired commented Jun 16, 2022

Describe the bug

Potentially related?* #5365

Consider this:

$: derivedFromFlag = flag ? 'On' : 'Off';
$: toggleFlag(counter);

vs this:

$: toggleFlag(counter);
$: derivedFromFlag = flag ? 'On' : 'Off';

Same code, only different order - however the first one is broken while the latter works; see this REPL: https://svelte.dev/repl/9d8cd5bb47164f96a19d1d887662a06b?version=3.48.0

It was my understanding that ordering of reactivity statements should not matter, as the svelte compiler ought to figure it out. If this is expected behavior, a warning (akin to circular dependency detection) would be much appreciated.

I spent numerous hours hounding down a reactivity issue, ruling out numerous other options before realizing it was this ordering issue. I am concerned that this will happened again and cause similar head scratching for my teammates or, worse, let subtle bugs hit production.

*RE: issue 5365 - Looking at the replies, it seems to share the same behavior & cause; but since it was done with an older version of svelte and was using stores, I was not sure if I should've replied there. To maintainers: please move this issue as seen fit

Reproduction

https://svelte.dev/repl/9d8cd5bb47164f96a19d1d887662a06b?version=3.48.0

Logs

No response

System Info

See REPL; issue appears in latest chrome & safari, so does not appear to be env dependent.

Severity

annoyance

@Conduitry
Copy link
Member

Conduitry commented Jun 16, 2022

This is intended. Apart from the stores in the issue you mentioned, most everything else is relevant. See also #3361, #5190, #5905, probably others.

The reactive blocks are ordered via simple static analysis at compile time, and all the compiler looks at are the variables that are assigned to and used within the block itself, not in any functions called by them.

My comment in #5848 goes into a bit of detail about how this works.

@noah-integrityinspired
Copy link
Author

noah-integrityinspired commented Jun 17, 2022

Gotcha - thank you for the response and appreciate linking the prior issues. Knowing that the svelte compiler only looks at the variables in the reactive statement (and does not dive into the function) is very insightful. I'll let my dev team to be vigilant for that situation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants