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.

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

Draft
wants to merge 28 commits into
base: main
Choose a base branch
from
Draft

Fix Suspense Hydration #2291

wants to merge 28 commits into from

Conversation

developit
Copy link
Member

@developit developit commented Jan 30, 2020

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 implemented componentDidCatch()). 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:

vnode._hydrating != null ? [oldDom] : null

To-Do

  • Fix test failures
  • Add MutationObserver-based test from the cli-demo repo
  • Test on preact-www

@github-actions
Copy link

Size Change: +28 B (0%)

Total Size: 38.4 kB

Filename Size Change
dist/preact.js 3.74 kB +5 B (0%)
dist/preact.min.js 3.74 kB +5 B (0%)
dist/preact.module.js 3.76 kB +10 B (0%)
dist/preact.umd.js 3.8 kB +8 B (0%)
ℹ️ View Unchanged
Filename Size Change
compat/dist/compat.js 2.95 kB 0 B
compat/dist/compat.module.js 2.97 kB 0 B
compat/dist/compat.umd.js 3 kB 0 B
debug/dist/debug.js 3.08 kB 0 B
debug/dist/debug.module.js 3.07 kB 0 B
debug/dist/debug.umd.js 3.14 kB 0 B
devtools/dist/devtools.js 175 B 0 B
devtools/dist/devtools.module.js 185 B 0 B
devtools/dist/devtools.umd.js 252 B 0 B
hooks/dist/hooks.js 1.06 kB 0 B
hooks/dist/hooks.module.js 1.08 kB 0 B
hooks/dist/hooks.umd.js 1.12 kB 0 B
test-utils/dist/testUtils.js 390 B 0 B
test-utils/dist/testUtils.module.js 392 B 0 B
test-utils/dist/testUtils.umd.js 469 B 0 B

compressed-size-action

@coveralls
Copy link

Coverage Status

Coverage increased (+0.0002%) to 99.809% when pulling 1f88e72 on fix-progressive-hydration into 8f679f0 on prateekbh/suspense-hydration.

// We can use this information if we return here to render later on.
oldVNode._hydrateDom = newVNode._dom = oldDom;
}
newVNode._dom = oldDom; // is this needed?
Copy link
Member

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

Copy link
Member

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.

Copy link
Member Author

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.

Comment on lines +92 to +93
const wasHydrating = vnode && vnode._hydrating === true;
if (!wasHydrating && !c._suspensions++) {
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
const wasHydrating = vnode && vnode._hydrating === true;
if (!wasHydrating && !c._suspensions++) {
if (!(vnode && vnode._hydrating === true) && !c._suspensions++) {

@developit developit changed the base branch from prateekbh/suspense-hydration to master September 13, 2020 20:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants