fix(suspense): avoid unmount activeBranch twice if wrapped in transition by edison1105 · Pull Request #9392 · vuejs/core

edison1105 · 2023-10-13T01:31:41Z

close #7966
the root cause is that the suspense resolves before the fallback node is mounted. This caused component B to be unmounted twice, causing this issue when it was unmounted the second time. see simplified demo
Notice the Console, unmount was printed twice.

Summary by CodeRabbit

Bug Fixes
- Prevented a double-unmount when using Suspense together with Transition in "out-in" mode so components are unmounted only once during fallback transitions.
Tests
- Added an end-to-end test validating Suspense + Transition "out-in" behavior and ensuring the active branch is not unmounted twice.

github-actions · 2023-10-13T01:33:09Z

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	105 kB (+137 B)	39.7 kB (+32 B)	35.7 kB (+21 B)
vue.global.prod.js	163 kB (+137 B)	59.7 kB (+34 B)	53.1 kB (+19 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	48.2 kB	18.7 kB	17.2 kB
createApp	56.3 kB	21.8 kB	19.9 kB
createSSRApp	60.6 kB	23.5 kB	21.5 kB
defineCustomElement	62.5 kB	23.7 kB	21.6 kB
overall	70.9 kB (+137 B)	27.1 kB (+33 B)	24.7 kB (+26 B)

pikax · 2023-10-13T10:56:02Z

@edison1105 I don't think the solution is good enough, from what I could gather this is caused by the renderer.ts

Basically the unmount is being called multiple times on the vnode, I wonder if we could replace the condition on suspense with a non altering flag on suspense.

I suppose it would make sense the vnode to know it has been unmounted therefore if unmounted is called again it should be ignored, some input from @yyx990803 would be great :)

edison1105 · 2023-10-13T12:37:20Z

@pikax
That's a great idea. I changed the solution.

chore: improve code chore: improve code chore: improve code chore(deps): update dependency @types/node to v18 (vuejs#9323) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> chore: improve code chore: revert code chore: improve code

coderabbitai · 2026-03-25T03:04:57Z

📝 Walkthrough

Walkthrough

Adds a boolean flag isFallbackMountPending to SuspenseBoundary and adjusts Suspense resolve/fallback flows so active branch unmounting is deferred when a Transition in out-in mode schedules the fallback mount via afterLeave. Includes an e2e test that verifies the active branch is not double-unmounted.

Changes

Cohort / File(s)	Summary
Runtime: Suspense boundary `packages/runtime-core/src/components/Suspense.ts`	Added `SuspenseBoundary.isFallbackMountPending: boolean`. Modified `resolve()` to skip unmounting active branch while `isFallbackMountPending` is true and to clear the flag before switching branches; `fallback()` sets the flag and defers fallback mount via `afterLeave`. Initialization updated to `false`.
E2E test: Transition + Suspense `packages/vue/__tests__/e2e/Transition.spec.ts`	Added an end-to-end test for a `transition` in `out-in` mode containing a `Suspense timeout="0"` that swaps branches and asserts DOM/classes and that `onVnodeBeforeUnmount` is called exactly once (no double-unmount).

Sequence Diagram(s)

sequenceDiagram
  participant App as Client
  participant T as Transition (out-in)
  participant S as Suspense
  participant R as Renderer/DOM

  App->>T: swap shallowRef (One -> Two)
  T->>S: trigger leave (out-in)
  S->>S: fallback() sets isFallbackMountPending = true\nattach afterLeave -> mountFallback
  T->>T: afterLeave fires
  T->>S: mountFallback (clear isFallbackMountPending = false)
  S->>R: mount fallback subtree
  S->>S: resolve() clears flag and swaps activeBranch (no double-unmount)
  S->>R: unmount old branch (once) and mount resolved branch

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

fix(suspense): defer clearing fallback vnode el in case it has dirs #14080: Modifies runtime-core/src/components/Suspense.ts to adjust timing of clearing/unmounting between active branch and fallback to avoid premature clearing or double-unmounts.
fix(suspense): clear placeholder and fallback el refs after resolved to enable GC #13928: Related changes to SuspenseBoundary structure and suspend/fallback handling in runtime-core.

Poem

🐰 In tunnels of code I hop and sing,
Waiting on leaves, I hold this thing,
A flag I set when fallbacks pause,
So branches unmount just once because —
Hooray, no double-hop today! 🥕

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check	✅ Passed	The PR changes directly address issue `#7966` by implementing a mechanism to prevent activeBranch double unmounting in Suspense+transition scenarios, which resolves the crash.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing the Suspense double-unmount issue: core logic modifications in Suspense.ts and a focused e2e test validating the fix.
Title check	✅ Passed	The title accurately and concisely describes the main fix: preventing double unmounting of the active branch when Suspense is wrapped in a transition with 'out-in' mode.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

pkg-pr-new · 2026-03-25T03:05:41Z

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@9392

npm i https://pkg.pr.new/@vue/compiler-core@9392

yarn add https://pkg.pr.new/@vue/compiler-core@9392.tgz

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@9392

npm i https://pkg.pr.new/@vue/compiler-dom@9392

yarn add https://pkg.pr.new/@vue/compiler-dom@9392.tgz

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@9392

npm i https://pkg.pr.new/@vue/compiler-sfc@9392

yarn add https://pkg.pr.new/@vue/compiler-sfc@9392.tgz

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@9392

npm i https://pkg.pr.new/@vue/compiler-ssr@9392

yarn add https://pkg.pr.new/@vue/compiler-ssr@9392.tgz

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@9392

npm i https://pkg.pr.new/@vue/reactivity@9392

yarn add https://pkg.pr.new/@vue/reactivity@9392.tgz

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@9392

npm i https://pkg.pr.new/@vue/runtime-core@9392

yarn add https://pkg.pr.new/@vue/runtime-core@9392.tgz

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@9392

npm i https://pkg.pr.new/@vue/runtime-dom@9392

yarn add https://pkg.pr.new/@vue/runtime-dom@9392.tgz

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@9392

npm i https://pkg.pr.new/@vue/server-renderer@9392

yarn add https://pkg.pr.new/@vue/server-renderer@9392.tgz

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@9392

npm i https://pkg.pr.new/@vue/shared@9392

yarn add https://pkg.pr.new/@vue/shared@9392.tgz

vue

pnpm add https://pkg.pr.new/vue@9392

npm i https://pkg.pr.new/vue@9392

yarn add https://pkg.pr.new/vue@9392.tgz

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@9392

npm i https://pkg.pr.new/@vue/compat@9392

yarn add https://pkg.pr.new/@vue/compat@9392.tgz

commit: cccb4a9

coderabbitai

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/runtime-core/src/components/Suspense.ts`:
- Around line 566-570: The current logic skips unmounting
suspense.initialContent in resolve() but fallback() still flips isInFallback
before the fallback vnode is actually mounted, allowing patchSuspense() (which
checks pendingBranch && isInFallback) to treat the leaving initialContent as if
the fallback were active and unmount the same vnode twice; to fix, make the
isInFallback checks in patchSuspense() and any branches that act on
pendingBranch also verify that activeBranch !== suspense.initialContent (or that
suspense.initialContent is not the leaving node) before patching/unmounting, or
alternatively ensure unmount operations on the same vnode are idempotent at the
renderer level (adjust unmount logic used by patchSuspense(), resolve(), and
fallback() to guard against re-unmounting the same vnode).
- Line 651: The Suspense instance's initialContent remains set when the
fast-resolve path wins because resolve() replaces the afterLeave callback but
doesn't clear suspense.initialContent; update the resolve() logic in the
Suspense implementation (the resolve() method that interacts with
mountFallback() and afterLeave) to explicitly set suspense.initialContent = null
when the pending branch is replaced so the old vnode/component tree is released
once the new branch takes over.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 3f881373-2fcb-46cf-b0a8-d94e8eae6d1e

📥 Commits

Reviewing files that changed from the base of the PR and between d61d803 and 36ee2b5.

📒 Files selected for processing (2)

packages/runtime-core/src/components/Suspense.ts
packages/vue/__tests__/e2e/Transition.spec.ts

…nt flag

edison1105 · 2026-03-25T03:30:51Z

/ecosystem-ci run

vue-bot · 2026-03-25T03:36:20Z

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
pinia	✅ success	✅ success
primevue	✅ success	✅ success
quasar	❌ failure	✅ success
language-tools	❌ failure	❌ failure
vite-plugin-vue	✅ success	✅ success
vue-i18n	✅ success	✅ success
vueuse	✅ success	✅ success
vuetify	✅ success	✅ success
vue-macros	✅ success	✅ success
nuxt	✅ success	✅ success
radix-vue	✅ success	✅ success
vitepress	✅ success	✅ success
vant	✅ success	✅ success
router	✅ success	✅ success
test-utils	✅ success	✅ success
vue-simple-compiler	✅ success	✅ success

fix(Suspense): avoid unmount activeBranch twice if wrapped in transtion

f435e19

test: add test case

c9f53cc

edison1105 mentioned this pull request Oct 13, 2023

fix(runtime-core): 'cur' attr is undefined in removeFragment #8320

Closed

edison1105 force-pushed the fix/7966 branch from ad40810 to 2089f54 Compare October 13, 2023 13:12

test: add test case

9c382fc

chore: improve code chore: improve code chore: improve code chore(deps): update dependency @types/node to v18 (vuejs#9323) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> chore: improve code chore: revert code chore: improve code

edison1105 force-pushed the fix/7966 branch from 6b0d53a to 9c382fc Compare October 14, 2023 08:32

edison1105 and others added 4 commits October 14, 2023 16:36

fix: typo

9e436af

Merge branch 'main' into fix/7966

e071c68

Merge branch 'main' into fix/7966

892e17f

[autofix.ci] apply automated fixes

514abb5

edison1105 added the scope: suspense label Mar 7, 2024

edison1105 and others added 3 commits March 8, 2024 14:06

Merge branch 'main' into fix/7966

173ae6c

[autofix.ci] apply automated fixes

41f25fb

Merge branch 'main' into fix/7966

833e32a

skirtles-code mentioned this pull request Apr 18, 2024

fix(runtime-core): don't attempt to remove null fragments (fix #7966) #8001

Closed

Merge branch 'main' into fix/7966

a94eb54

edison1105 added the ready for review This PR requires more reviews label Aug 1, 2024

edison1105 added the 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. label Feb 18, 2025

Merge branch 'main' into fix/7966

36ee2b5

coderabbitai Bot reviewed Mar 25, 2026

View reviewed changes

Comment thread packages/runtime-core/src/components/Suspense.ts Outdated

Comment thread packages/runtime-core/src/components/Suspense.ts Outdated

refactor(suspense): replace initialContent tracking with fallback mou…

cccb4a9

…nt flag

edison1105 removed this from Issue / PR Management Mar 25, 2026

edison1105 changed the title ~~fix(Suspense): avoid unmount activeBranch twice if wrapped in transition~~ fix(suspense): avoid unmount activeBranch twice if wrapped in transition Mar 25, 2026

edison1105 added ready to merge The PR is ready to be merged. and removed ready for review This PR requires more reviews labels Mar 25, 2026

vuejs deleted a comment from edison1105 Mar 25, 2026

edison1105 merged commit 908c6ad into vuejs:main Mar 25, 2026
14 checks passed

coderabbitai Bot mentioned this pull request Mar 25, 2026

fix(runtime-dom): defer teleport mount/update until suspense resolves #8619

Merged

Gabriel-SPassos mentioned this pull request Mar 26, 2026

Teleport + Suspense unmount crash during page navigation in Nuxt SSR (regression in 3.5.31) #14640

Closed

coderabbitai Bot mentioned this pull request Mar 27, 2026

fix(teleport): handle updates before deferred mount #14642

Merged

coderabbitai Bot mentioned this pull request Apr 27, 2026

fix(suspense): avoid DOM leak with out-in transition in v-if fragment #14762

Merged

Uh oh!

Conversation

edison1105 commented Oct 13, 2023 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

github-actions Bot commented Oct 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Size Report

Bundles

Usages

Uh oh!

pikax commented Oct 13, 2023

Uh oh!

edison1105 commented Oct 13, 2023

Uh oh!

coderabbitai Bot commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Poem

❌ Failed checks (1 warning)

Uh oh!

pkg-pr-new Bot commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

edison1105 commented Mar 25, 2026

Uh oh!

vue-bot commented Mar 25, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

edison1105 commented Oct 13, 2023 •

edited by coderabbitai Bot

Loading

github-actions Bot commented Oct 13, 2023 •

edited

Loading

coderabbitai Bot commented Mar 25, 2026 •

edited

Loading

pkg-pr-new Bot commented Mar 25, 2026 •

edited

Loading