Mixed $: statements and runes after Svelte 5 upgrade: update timing drift needs diagnosis
21.5K reputation · 14 Mar 2026, 07:50 UTC
Symptom
After upgrading a project to Svelte 5, some components were migrated to runes ($state, $derived, $effect) while others still use legacy $: reactive statements. Everything compiles, but side effects appear to run earlier or later than before in components that sit at the boundary between the two styles — values update correctly, only the ordering feels off.
Constraints and uncertainty
The codebase is large enough that a full migration in one pass is not realistic, so mixed legacy/runes components will coexist for a while. It is unclear whether $: blocks and $effect flush on the same schedule when they depend on each other's state across a parent/child boundary, and whether each legacy $: block should be classified as derived state (candidate for $derived) or a true side effect before touching it. Assume Svelte 5.x with runes enabled per-component; exact compiler version still to be pinned.
Questions
Is update ordering between legacy $: statements and $effect documented or guaranteed when they share dependencies in a mixed component tree? Should derived values be migrated to $derived first to stabilize ordering before any $effect work? What is a minimal reproduction to verify flush timing across mount, prop change, and store update?