fix(runtime-core): properly handle async component update before resolve#11619
Merged
edison1105 merged 8 commits intovuejs:mainfrom Feb 9, 2026
Merged
fix(runtime-core): properly handle async component update before resolve#11619edison1105 merged 8 commits intovuejs:mainfrom
edison1105 merged 8 commits intovuejs:mainfrom
Conversation
Size ReportBundles
Usages
|
edison1105
reviewed
Aug 15, 2024
| // the instance may be destroyed during the time period | ||
| if (!instance.isUnmounted) { | ||
| componentUpdateFn() | ||
| instance.update() |
Member
There was a problem hiding this comment.
Suggested change
| instance.update() | |
| update() |
Member
|
Thank you for addressing the issue. |
edison1105
added
need test
edison1105
requested changes
Aug 15, 2024
| // the instance may be destroyed during the time period | ||
| if (!instance.isUnmounted) { | ||
| componentUpdateFn() | ||
| update() |
Member
There was a problem hiding this comment.
There is another problem here. The update() is executed 2 times.
This behavior is not related to this PR. But it needs to be fixed.
The flow is as follows:
- When
locateNonHydratedAsyncRootis called,subComponent.asyncResolvedisfalse,nonHydratedAsyncRoothas a value, and athencallback is registered. - The
thencallback is triggered and callsupdate. - We go back to step 1, but
subComponent.asyncResolvedis stillfalsebecause thethenat this line is registered later and executes after the previously registeredthen. Thethencallback is registered again. - Same as step 2.
- Now
subComponent.asyncResolvedistrue, andnonHydratedAsyncRootisundefined. - The remaining update logic runs.
In this process, the then callback gets registered twice, and update is called twice.
The following code can be used to prevent this behavior.
nonHydratedAsyncRoot.asyncDep!.then(() => {
// the instance may be destroyed during the time period
queuePostRenderEffect(()=>{
if (!instance.isUnmounted) update()
},parentSuspense)
})
Member
|
I'm pretty sure the previous fix is proper. |
Member
Author
|
@edison1105 I tried to fix it again, maybe it should be handled like this
You are right! I was wrong. I thought that when patching suspense, I had to confirm which component was pending, but this has nothing to do with pendingBranch. |
edison1105
changed the title
edison1105
added
ready for review
edison1105
approved these changes
Aug 15, 2024
@vue/compiler-core
@vue/compiler-dom
@vue/compiler-sfc
@vue/compiler-ssr
@vue/reactivity
@vue/runtime-core
@vue/runtime-dom
@vue/server-renderer
@vue/shared
vue
@vue/compat
commit: |
📝 WalkthroughWalkthroughA new test verifies prop updates to async components inside Suspense; renderer update logic was changed to defer post-resolution updates by scheduling them with queuePostRenderEffect instead of calling updates synchronously. Changes
Sequence Diagram(s)sequenceDiagram
participant Parent as ParentComponent
participant Suspense as SuspenseBoundary
participant Async as AsyncChildComponent
participant Renderer
Parent->>Suspense: Render async child (dynamic)
Suspense->>Async: Mount -> async setup (suspends)
Parent->>Async: Prop update (before resolve)
Async->>Renderer: Request update (while suspended)
Renderer->>Renderer: queuePostRenderEffect(update) (defer)
note right of Renderer: waits for async resolve
Async-->>Suspense: Resolves
Renderer->>Async: Run deferred update if still mounted
Async-->>Parent: onUpdated / re-render completes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
Member
|
/ecosystem-ci run |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@packages/runtime-core/__tests__/components/Suspense.spec.ts`:
- Around line 2185-2241: Await the render and make the test deterministic by
using fake timers and advancing them so the async onMounted in Parent runs
before the test exits: call the test runtime's fake-timer setup (e.g.,
jest.useFakeTimers()/vi.useFakeTimers()), await render(h(App), root), advance
timers by 1000ms (e.g., jest.advanceTimersByTime(1000) or runAllTimers), then
await nextTick()/microtask flush before checking the expectation inside Parent's
onMounted (the expect(arr) assertion) or resolve a done promise after the
assertion so the test waits for completion; update the test around Parent, App,
and the render call to implement these changes.
Contributor
|
📝 Ran ecosystem CI: Open
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
close #11617
this pr playground
Summary by CodeRabbit
Bug Fixes
Tests