fix(runtime-core): properly handle async component update before resolve #11619
Conversation
Size ReportBundles
Usages
|
| @@ -1438,7 +1438,7 @@ function baseCreateRenderer( | |||
| nonHydratedAsyncRoot.asyncDep!.then(() => { | |||
| // the instance may be destroyed during the time period | |||
| if (!instance.isUnmounted) { | |||
| componentUpdateFn() | |||
| instance.update() | |||
There was a problem hiding this comment.
| instance.update() | |
| update() |
|
Thank you for addressing the issue. |
| @@ -1438,7 +1438,7 @@ function baseCreateRenderer( | |||
| nonHydratedAsyncRoot.asyncDep!.then(() => { | |||
| // the instance may be destroyed during the time period | |||
| if (!instance.isUnmounted) { | |||
| componentUpdateFn() | |||
| update() | |||
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)
})|
I'm pretty sure the previous fix is proper. |
|
@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. |
@vue/compiler-core
@vue/compiler-dom
@vue/compiler-ssr
@vue/compiler-sfc
@vue/reactivity
@vue/runtime-core
@vue/runtime-dom
@vue/server-renderer
@vue/shared
vue
@vue/compat
commit: |
WalkthroughThe changes introduce a new test case to verify async component prop updates within Suspense and modify the renderer's update logic. The renderer now schedules async component updates as post-render effects instead of invoking them synchronously, ensuring correct update sequencing when async dependencies resolve. Changes
Sequence Diagram(s)sequenceDiagram
participant ParentComponent
participant SuspenseBoundary
participant AsyncChildComponent
participant Renderer
ParentComponent->>SuspenseBoundary: Renders AsyncChildComponent
SuspenseBoundary->>AsyncChildComponent: Mounts with async setup
AsyncChildComponent-->>SuspenseBoundary: Suspends until async resolves
ParentComponent->>AsyncChildComponent: Updates prop (loading)
AsyncChildComponent->>Renderer: Requests update (before resolve)
Renderer->>Renderer: Queues update as post-render effect
Renderer->>AsyncChildComponent: Applies update after async resolve
AsyncChildComponent-->>ParentComponent: Emits updated state
Assessment against linked issues
Poem
Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
⏰ Context from checks skipped due to timeout of 90000ms (1)
🔇 Additional comments (2)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
close #11617
this pr playground
Summary by CodeRabbit
Bug Fixes
Tests