Svelte reactive declarations: async update ordering uncertainty
21.5K reputation · 27 Jan 2025, 06:33 UTC
Async Triggered Reactive State Updates
In a component that defines multiple reactive declarations using the $: label, an asynchronous operation (e.g., fetch, setTimeout) assigns a new value to a variable referenced by other reactive blocks. The compiler statically tracks dependencies, but the timing of the assignment may occur after the initial synchronous execution block. This raises uncertainty about the execution order of the dependent reactive statements and whether updates are batched across the async boundary.
Specifically, I need to know:
- When an async callback reassigns a variable, does the compiler still honor the original declaration order of the reactive statements that depend on that variable?
- Are multiple reactive updates triggered by separate async callbacks within the same event loop tick batched together, or does each callback cause an immediate re-render?
- How does a reactive statement that depends on a prop behave if the parent component updates that prop after the async resolution has already triggered a state change?