Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(runtime-core): properly handle async component update before resolve #11619

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

fix(runtime-core): properly handle async component update before resolve #11619

Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2925c36
fix(runtime-core): fix nonHydratedAsyncRoot update
linzhe141 Aug 15, 2024
8b7340b
chore: update
linzhe141 Aug 15, 2024
864fa32
chore: update
linzhe141 Aug 15, 2024
bbcb220
chore: update test
linzhe141 Aug 15, 2024
2bb0ab6
update test case name
edison1105 Aug 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/runtime-core/src/renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1438,7 +1438,7 @@ function baseCreateRenderer(
nonHydratedAsyncRoot.asyncDep!.then(() => {
// the instance may be destroyed during the time period
if (!instance.isUnmounted) {
componentUpdateFn()
update()
Copy link
Member

@edison1105 edison1105 Aug 15, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:

  1. When locateNonHydratedAsyncRoot is called, subComponent.asyncResolved is false, nonHydratedAsyncRoot has a value, and a then callback is registered.
  2. The then callback is triggered and calls update.
  3. We go back to step 1, but subComponent.asyncResolved is still false because the then at this line is registered later and executes after the previously registered then. The then callback is registered again.
  4. Same as step 2.
  5. Now subComponent.asyncResolved is true, and nonHydratedAsyncRoot is undefined.
  6. 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)
})

}
})
return
Expand Down