Experimental Async with preload and conditional bind:this kills reactivity
#17118
Development PRs
When #traverse_effect_tree runs, it can execute block effects, which in turn can create effects which are scheduled, which means queued_root_effects is now filled again. We didn't take that into account and assumed that in #commit we would have no queued root effects. As a result another batch could wrongfully run with the queued root effects of the main batch. That in turn can mean that skipped_effects is different on the other batch, leading to some branches not getting traversed into. As a result part of the tree is marked clean while further below batches are still not marked clean. That then breaks reactivity as soon as you schedule an effect in this still-not-clean sub tree, as it will not bubble all the way up to the root, since it comes across a not-clean branch, assuming something was already scheduled.
The fix is simple: Stash the queued root effects before rebasing branches.
Fixes #17118
Before submitting the PR, please make sure you do the following
- It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
- Prefix your PR title with
feat:,fix:,chore:, ordocs:. - This message body should clearly illustrate what problems it solves.
- Ideally, include a test that fails without this PR but passes with it.
- If this PR changes code within
packages/svelte/src, add a changeset (npx changeset).
Tests and linting
- Run the tests with
pnpm testand lint the project withpnpm lint
When deferring effects we didn't unmark the deriveds that lead to those effects. This means that they might not be reached in subsequent runs of mark_reactions.
Fixes #17118 (comment)
Before submitting the PR, please make sure you do the following
- It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
- Prefix your PR title with
feat:,fix:,chore:, ordocs:. - This message body should clearly illustrate what problems it solves.
- Ideally, include a test that fails without this PR but passes with it.
- If this PR changes code within
packages/svelte/src, add a changeset (npx changeset).
Tests and linting
- Run the tests with
pnpm testand lint the project withpnpm lint
Issue
Describe the bug
With hover preloading on and async enabled, it seems that conditional bind:this can somehow break reactivity for the application.
Minimal repro below. The select box uses the bind:this for absolutely nothing in the repro, but it still breaks. Remove the bind:this, disable preloading, or disable async and things behave as expected.
Reproduction
Logs
System Info
System:
OS: Windows 10 10.0.19045
CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor
Memory: 31.45 GB / 63.89 GB
Binaries:
Node: 22.12.0 - C:\nvm4w\nodejs\node.EXE
npm: 10.9.0 - C:\nvm4w\nodejs\npm.CMD
Browsers:
Chrome: 141.0.7390.123
Edge: Chromium (140.0.3485.54)
Firefox: 144.0.2 - C:\Program Files\Mozilla Firefox\firefox.exe
Firefox Developer Edition: 137.0 - C:\Program Files\Firefox Developer Edition\firefox.exe
Internet Explorer: 11.0.19041.5794Severity
annoyance
Info
Seems to be another issue related to fork. Broken in [email protected], working in 5.41.4.
I'm also stuck at 5.41.4. Wasn't able to find a minimal reproduction. bind:this could be the trigger.
Just updated to Svelte 5.43.5. Fixes a number of issues I was experiencing (e.g. loss of reactivity on submission). So I will stick with it if I can.
However, this bug remains. It appears to me that components are initialised on preloading without their props.
My SvelteKit sites (Svelte 5.43.5/ SvelteKit 2.48.4) are unusable with hover preloading on and async enable.
Switching preloading off enables site to function normally (at least the experience so far).
Nice workaround, @nevil2 ! No issue on svelte 5.43.5 so far after disabling data-sveltekit-preload-data
Nice workaround, @nevil2 ! No issue on svelte 5.43.5 so far after disabling
data-sveltekit-preload-data
But thats a neat feature 😢
Does anyone have a reproducible example of the core issue?
This is a bug with fork and deriveds I'm already investigating...actually I found the root cause already, and it should only happen when you hover on something and move on something else with the same link but different params.
This is the simplest repro i could build
https://svelte.dev/playground/786930d09537414fadc7adf30152890b?version=5.43.6
#17145 fixes Ron's repro, but not Paolo's.
Ron's (forked) https://stackblitz.com/edit/sveltejs-kit-template-default-9ynbnnt9?file=package.json
Paolo's
EDIT: 17147 fixes it
sveltejs/kit#14865 released in [email protected] seems to have fixed the data-sveltekit-preload-data issue that I was experiencing, without the need of #17147
sveltejs/kit#14865 released in
[email protected]seems to have fixed thedata-sveltekit-preload-dataissue, without the need of #17147
Hmm, for me it didn't fix it. I'll continue testing, but I upgraded from 3.39.13 and had the same behavior
@wiesson Probably because my case is a bit simpler: I have async mode on, but my affected pages/components aren't really using async or remote functions, yet the [email protected] broke my page loading.
Pro tip: You can prefix GitHub URLs of issues, PRs or discussions with svcl.dev/ to view them on this page! Also try it on a GitHub release ;)