Pending async effects breaking synchronous state/effects

[dangodai]

Describe the bug

When I have pending async work happening (e.g. mounting an async component) I am getting strange and erroneous results while modifying state elsewhere.

See the reproduction for examples.

Reproduction

Reproduction: https://svelte.dev/playground/c0f672d625bb47f28808234647d8a5f3?version=5.42.2

This example contains a list of incrementing numbers which can be added to by clicking the button. Each list item will also cause an async component to be rendered.

If you rapidly click the "Add to list" button you will be appending to the list while async work in happening from mounting new the components.

When rapidly clicking you will observe

1. The original list will temporarily have gaps in it
2. The derived list showing the type of each element will have undefined where the gaps are

3. The printed results should eventually reconcile
4. Printing the lists as a text expression {list} gives different results than printing inside of an #{each} block until the results reconcile

The primary issue here is (1) (and by extension (2)) where we temporarily have incorrect records. In the real world this leads to unexpected errors such as trying to access properties of undefined.

Logs

System Info

System:
    OS: Linux 6.15 Arch Linux
    CPU: (12) x64 AMD Ryzen 5 2600 Six-Core Processor
    Memory: 4.59 GB / 15.54 GB
    Container: Yes
    Shell: 5.3.3 - /bin/bash
  Binaries:
    Node: 22.17.0 - /home/yung/.nvm/versions/node/v22.17.0/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 10.9.2 - /home/yung/.nvm/versions/node/v22.17.0/bin/npm
    pnpm: 10.13.1 - /home/yung/.local/share/pnpm/pnpm
  Browsers:
    Chromium: 139.0.7258.66
    Firefox: 141.0
    Firefox Developer Edition: 141.0
  npmPackages:
    svelte: ^5.41.4 => 5.41.4

Severity

blocking an upgrade

[dummdidumm]

Possibly related #17033