Svelte reactive declarations: async update ordering uncertainty

Answer

1. Declaration order is still respected. The compiler tracks dependencies and schedules updates for each $: block in the order they were written. However, if the reassignment happens inside an asynchronous callback (e.g., after an await), the code after the await runs as a microtask later. Any synchronous updates that occur before that microtask will execute first, which can make it appear as if the original order was violated.
2. Updates from separate async callbacks are not automatically batched together. Each await (or setTimeout, Promise.then, etc.) creates its own microtask. Svelte processes reactive updates at the end of the current microtask queue, so updates triggered by different callbacks run in separate ticks unless they are scheduled in the same microtask (e.g., same Promise resolution). Consequently, each callback may cause its own re‑render.
3. Prop‑dependent reactive statements react to later prop changes normally. A prop update is just another reactive assignment. If a parent changes a prop after an async callback has already updated local state, the dependent $: block will run again in the next synchronous microtask, potentially overriding the async‑derived value unless you guard against it (e.g., by using a flag or moving the async logic out of the reactive block).

Confirmed facts (from research)

• Svelte's $: reactive blocks execute synchronously after any assignment that changes a referenced reactive value, before the browser paints.
• Reactive updates are scheduled as microtasks; yielding to the event loop with await breaks the immediate ordering guarantee.

Likely explanation

When an asynchronous operation appears inside a $: block, the code before the await runs synchronously, triggering any dependent reactive blocks immediately. The code after the await is queued as a microtask, allowing other synchronous updates (including those from other $: blocks or prop changes) to run first. This creates the perception of ordering uncertainty, even though the compiler still honors the original declaration order for each scheduled update.

Steps to verify or mitigate

1. Create a minimal Svelte REPL with two reactive variables, update one synchronously and trigger an async update in a $: block, then log the order of updates to observe the behavior.
2. Add a call to tick() before the await inside the $: block and verify that the async code now runs after the synchronous update, demonstrating that flushing pending updates restores deterministic order.
3. Inspect the generated JavaScript (via svelte-check or devtools) to see that $: blocks compile to $$invalidate callbacks that run before microtasks.