Describe the bug
Using a reactive registry/object to bind refs to components rendered in an {#each} doesn't always work as expected. In the specific case captured in the reproduction, Svelte sets refs for existing components in the registry to null after the keyed {#each} block updates, even though the components aren't destroyed.
Hopefully the reproduction makes the exact issue clearer, because this is a little hard to describe. The reproduction is a bit contrived, but it does capture my original use case.
Reproduction
https://svelte.dev/playground/hello-world?version=5.55.5#H4sIAAAAAAAAE4VU226jMBD9lZE3D6BNoX3YFxZSVfsH0b6VSHGwSawaG9mTpBHi31e2IYFsL0-guZ45c8YdUbThJCNrTisUJw47oViGB2FBKOh-cFodethJXb2RJamF5JZkrx3BS-vSnIEsxyIvbZvYE5fobDtq-Uf2SivkCi3JSG4rI1pclapE0bTaIHQoqrceaqMbKElIKslvFzGJWuvzGJKka31OpoGqRMkR1LGxUMDCIkUevW5iX6TSyiIYffY-xo04cRa52KShbaSgWEHUCZaBWoKDn8HWdVt0qt_2cXxXZc3rSZOujwcA1F5UBfVRVSi0AsrYWp-jGDo_yJAvGBQQelOMHp5ieH6Gxxh-wlMYGL2vPdpDJFg82OiZCgRHUzSaBiCvgm2ek0reXH1Ac8WBRuz33Dgsgl3RfJe-EMq2vMJoCHTOPL3tTuVMnKCS1NqiJI7bkvidBvkEtql1X3A1EsHiPrTOHbeO5qJzDvfX3yTojR5ayNr0kIbCqdel-531dtoyWo79S8x3R0StQCs_V9GFTfSrF8YcnjwNAUP494A_KBnFTjQTaseM1d9gg9ts9_0mc6RMnFaO2PAtVW7xIrmPTDyiYV1M2FbSSwa15O-DAtzvAxOG-z1nUGl5bNSoGCn26kEgb2wGFqnBwbGnbQaPyS_Dm-m-k5HGrzp-kJunI2KyJMjfkWRojrxffvJc3A53_lzM7J88F-7CuyCXAhat0a2N4sn1B5rXvB5s_N0_HNdLGGQ-TngN__p-DlQxyf_Mc6nkBqOtt3LmXgoHaxtPaJmfih_gPxlNas9O4AqtX3X3GhrFMud7syRIhTwLxUhWU2l5_w-8NFqY6AUAAA
To reproduce the problem:
- Click "Add row" and dismiss the alert dialog.
- Click "Trigger Row 1" to display the same alert dialog. This works because of the saved component ref.
- Click "Add row" again and dismiss the alert dialog.
- Click "Trigger Row 1" again. Nothing happens this time because Svelte set the component's ref to
null in the rowRefs registry object. Check out the $inspect traces in the console to confirm.
Note that making the rowRefs object non-reactive works around the issue, but then Svelte complains about the non-reactive binding.
Logs
System Info
System:
OS: macOS 26.3.1
CPU: (12) arm64 Apple M2 Pro
Memory: 891.05 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.17.1 - /Users/braedenpartridge/projects/fwd/.gradle/nodejs/node-v22.17.1-darwin-arm64/bin/node
npm: 10.9.2 - /Users/braedenpartridge/projects/fwd/.gradle/nodejs/node-v22.17.1-darwin-arm64/bin/npm
pnpm: 10.13.1 - /Users/braedenpartridge/projects/fwd/.gradle/pnpm/pnpm-v10.13.1/bin/pnpm
Browsers:
Chrome: 147.0.7727.116
Edge: 147.0.3912.86
Firefox: 148.0
Safari: 26.3.1
npmPackages:
svelte: 5.55.5 => 5.55.5
Severity
annoyance
Describe the bug
Using a reactive registry/object to bind refs to components rendered in an
{#each}doesn't always work as expected. In the specific case captured in the reproduction, Svelte sets refs for existing components in the registry tonullafter the keyed{#each}block updates, even though the components aren't destroyed.Hopefully the reproduction makes the exact issue clearer, because this is a little hard to describe. The reproduction is a bit contrived, but it does capture my original use case.
Reproduction
https://svelte.dev/playground/hello-world?version=5.55.5#H4sIAAAAAAAAE4VU226jMBD9lZE3D6BNoX3YFxZSVfsH0b6VSHGwSawaG9mTpBHi31e2IYFsL0-guZ45c8YdUbThJCNrTisUJw47oViGB2FBKOh-cFodethJXb2RJamF5JZkrx3BS-vSnIEsxyIvbZvYE5fobDtq-Uf2SivkCi3JSG4rI1pclapE0bTaIHQoqrceaqMbKElIKslvFzGJWuvzGJKka31OpoGqRMkR1LGxUMDCIkUevW5iX6TSyiIYffY-xo04cRa52KShbaSgWEHUCZaBWoKDn8HWdVt0qt_2cXxXZc3rSZOujwcA1F5UBfVRVSi0AsrYWp-jGDo_yJAvGBQQelOMHp5ieH6Gxxh-wlMYGL2vPdpDJFg82OiZCgRHUzSaBiCvgm2ek0reXH1Ac8WBRuz33Dgsgl3RfJe-EMq2vMJoCHTOPL3tTuVMnKCS1NqiJI7bkvidBvkEtql1X3A1EsHiPrTOHbeO5qJzDvfX3yTojR5ayNr0kIbCqdel-531dtoyWo79S8x3R0StQCs_V9GFTfSrF8YcnjwNAUP494A_KBnFTjQTaseM1d9gg9ts9_0mc6RMnFaO2PAtVW7xIrmPTDyiYV1M2FbSSwa15O-DAtzvAxOG-z1nUGl5bNSoGCn26kEgb2wGFqnBwbGnbQaPyS_Dm-m-k5HGrzp-kJunI2KyJMjfkWRojrxffvJc3A53_lzM7J88F-7CuyCXAhat0a2N4sn1B5rXvB5s_N0_HNdLGGQ-TngN__p-DlQxyf_Mc6nkBqOtt3LmXgoHaxtPaJmfih_gPxlNas9O4AqtX3X3GhrFMud7syRIhTwLxUhWU2l5_w-8NFqY6AUAAA
To reproduce the problem:
nullin therowRefsregistry object. Check out the$inspecttraces in the console to confirm.Note that making the
rowRefsobject non-reactive works around the issue, but then Svelte complains about the non-reactive binding.Logs
System Info
System: OS: macOS 26.3.1 CPU: (12) arm64 Apple M2 Pro Memory: 891.05 MB / 32.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 22.17.1 - /Users/braedenpartridge/projects/fwd/.gradle/nodejs/node-v22.17.1-darwin-arm64/bin/node npm: 10.9.2 - /Users/braedenpartridge/projects/fwd/.gradle/nodejs/node-v22.17.1-darwin-arm64/bin/npm pnpm: 10.13.1 - /Users/braedenpartridge/projects/fwd/.gradle/pnpm/pnpm-v10.13.1/bin/pnpm Browsers: Chrome: 147.0.7727.116 Edge: 147.0.3912.86 Firefox: 148.0 Safari: 26.3.1 npmPackages: svelte: 5.55.5 => 5.55.5Severity
annoyance