You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A weird lifetime cycle bug has appeared in v5.36 onwards causing all sort of weird rendering issue in my app. It seems like the unmounting/subscription order for stores has changed causing overlaps and resulting in slowdown and rendering issues in the app.
I've created a reproduction that you can check out. Here's a video of how the issue looks like:
v5.35
v5.35.mp4
v5.38
v5.38.mp4
Reproduction
The logs below show the changed order of lifecycle in the new version.
There are a few moving parts so I created the repository with the least things I could:
To see the bug in action yourself, change svelte version to v5.36+ and run the dev server.
Go to folder view, then click on any video item.
Then keep going back and forth between folder and item.
You'll see the un-subscription of the clicked video item happens AFTER the list subscription happens. In v5.35, the un-subscription happens FIRST and then the new subscription for listing items follows.
Logs
These logs are from the browser console
In v5.35
========== NAVIGATING TO VIDEO ==========
+page.svelte:31 🔴 [Folder Page] Destroyed
+layout.svelte:24 🔴 [Workspace Layout] Destroyed
db.ts:71 📕 [Firestore UNSUBSCRIBE] Ending query
db.ts:83 📖[Firestore SUBSCRIBE] Document: video1
+page.svelte:14 🟢 [Video Page] Mounted
+layout.svelte:5 [Studio Layout] Mounted
+page.svelte:37
========== NAVIGATING BACK TO FOLDER ==========
+page.svelte:18 🔴 [Video Page] Destroyed
db.ts:104 📕 [Firestore UNSUBSCRIBE] Document: video1 <<<< UNSUBSCRIBED FIRST
+layout.svelte:9 [Studio Layout] Destroying
workspaceContext.ts:7 🏢 [WorkspaceContext] Created
db.ts:50 📖 [Firestore SUBSCRIBE] Starting query <<<< NEW SUBSCRIPTION AFTER
In v5.38
========== NAVIGATING TO VIDEO ==========
db.ts:83 📖[Firestore SUBSCRIBE] Document: video1
+page.svelte:31 🔴 [Folder Page] Destroyed
+layout.svelte:24 🔴 [Workspace Layout] Destroyed
db.ts:71 📕 [Firestore UNSUBSCRIBE] Ending query
+page.svelte:14 🟢 [Video Page] Mounted
+layout.svelte:5 [Studio Layout] Mounted
+page.svelte:37
========== NAVIGATING BACK TO FOLDER ==========
workspaceContext.ts:7 🏢 [WorkspaceContext] Created
db.ts:50 📖 [Firestore SUBSCRIBE] Starting query <<<< NEW SUBSCRIPTION FIRST
+layout.svelte:16 🏢 [Workspace Layout] 165 items
+page.svelte:18 🔴 [Video Page] Destroyed
db.ts:104 📕 [Firestore UNSUBSCRIBE] Document: video1 <<<< UNSUBSCRIBED AFTER
Describe the bug
A weird lifetime cycle bug has appeared in v5.36 onwards causing all sort of weird rendering issue in my app. It seems like the unmounting/subscription order for stores has changed causing overlaps and resulting in slowdown and rendering issues in the app.
I've created a reproduction that you can check out. Here's a video of how the issue looks like:
v5.35
v5.35.mp4
v5.38
v5.38.mp4
Reproduction
The logs below show the changed order of lifecycle in the new version.
There are a few moving parts so I created the repository with the least things I could:
https://github.com/harshmandan/svelte-lifecycle-bug-reproduction
To see the bug in action yourself, change svelte version to v5.36+ and run the dev server.
Logs
These logs are from the browser console
In v5.35
In v5.38
System Info
System: OS: macOS 15.6 CPU: (8) arm64 Apple M1 Pro Memory: 70.77 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 22.15.0 - ~/.nvm/versions/node/v22.15.0/bin/node npm: 10.9.2 - ~/.nvm/versions/node/v22.15.0/bin/npm pnpm: 10.11.0 - ~/.nvm/versions/node/v22.15.0/bin/pnpm bun: 1.1.6 - /opt/homebrew/bin/bun npmPackages: svelte: 5.38.0 => 5.38.0 svelte: 5.36.0 => 5.36.0Severity
blocking all usage of svelte