-
-
Notifications
You must be signed in to change notification settings - Fork 2k
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.
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
Fix Suspense Hydration #2291
base: main
Are you sure you want to change the base?
Fix Suspense Hydration #2291
Conversation
…eekbh/suspense-hydration
…actjs/preact into prateekbh/suspense-hydration
…eekbh/suspense-hydration
…actjs/preact into prateekbh/suspense-hydration
Size Change: +28 B (0%) Total Size: 38.4 kB
ℹ️ View Unchanged
|
src/diff/index.js
Outdated
// We can use this information if we return here to render later on. | ||
oldVNode._hydrateDom = newVNode._dom = oldDom; | ||
} | ||
newVNode._dom = oldDom; // is this needed? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The Suspense tests pass if we still keep isHydrating
check
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
IIRC newVNode._dom = oldDom;
is needed because the diff remove the DOM otherwise it removes the existing DOM in next render.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'll try to get this fixed.
const wasHydrating = vnode && vnode._hydrating === true; | ||
if (!wasHydrating && !c._suspensions++) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const wasHydrating = vnode && vnode._hydrating === true; | |
if (!wasHydrating && !c._suspensions++) { | |
if (!(vnode && vnode._hydrating === true) && !c._suspensions++) { |
Instead of annotating the VNode at a suspend point (a component that threw during render) with
_hydrateDom
, annotate the VNode at the Suspense boundary (the component that implementedcomponentDidCatch()
). When re-rendering a component, if its owner vnode has a boolean._hydrating
property value, that means we should attempt to resume from the VNode's current._dom
reference.You can try this PR by checking out the suspense-hydration-testing branch of preactjs/cli-demo. Clone, then run
npm i && npm link ../preact && npm run build && http-server -s -p 8080 build
Note: looking at this, I believe I need to change
src/component.js
L129 in order to enable resumption for trees that suspended during non-hydrate rendering:To-Do
preact-www