Skip to content

Suspended components should rerender through sCU#2125

Merged
JoviDeCroock merged 9 commits into
masterfrom
fix/suspense-scu
Feb 2, 2020
Merged

Suspended components should rerender through sCU#2125
JoviDeCroock merged 9 commits into
masterfrom
fix/suspense-scu

Conversation

@andrewiggins

@andrewiggins andrewiggins commented Nov 14, 2019

Copy link
Copy Markdown
Member

Resurrecting the awesome work @sventschui did in #1660 now built on top of @jviide and @prateekbh suspense changes. Just calls forceUpdate on the suspended component to guarantee it rerenders when the promise resolves.

Fixes #2176

@coveralls

coveralls commented Nov 14, 2019

Copy link
Copy Markdown

Coverage Status

Coverage increased (+0.001%) to 99.809% when pulling bcdd135 on fix/suspense-scu into 0fb3b13 on master.

Comment thread debug/src/debug.js
Comment thread compat/src/suspense.js Outdated
@sventschui

Copy link
Copy Markdown
Member

Your current approach is currently running into similar issues as #2159

This makes me rethink our decision to unmount suspended content instead of adding display="none" as react does. But from the early days I remember adding a display="none" is not that easy

@github-actions

github-actions Bot commented Jan 31, 2020

Copy link
Copy Markdown

Size Change: +122 B (0%)

Total Size: 38.4 kB

Filename Size Change
compat/dist/compat.js 3 kB +41 B (1%)
compat/dist/compat.module.js 3.02 kB +38 B (1%)
compat/dist/compat.umd.js 3.05 kB +36 B (1%)
debug/dist/debug.js 3.08 kB +3 B (0%)
debug/dist/debug.module.js 3.06 kB +1 B
debug/dist/debug.umd.js 3.14 kB +3 B (0%)
ℹ️ View Unchanged
Filename Size Change
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
dist/preact.js 3.7 kB 0 B
dist/preact.min.js 3.7 kB 0 B
dist/preact.module.js 3.72 kB 0 B
dist/preact.umd.js 3.77 kB 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

Comment thread compat/src/suspense.js
c._vnode._children[0] = c.state._suspended;
c.setState({ _suspended: (c._detachOnNextRender = null) });

let suspended;

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

I didn't spend much time golfing this so there might be a smaller alternative

Comment thread compat/src/suspense.js

let suspended;
while ((suspended = c._suspenders.pop())) {
suspended.forceUpdate();

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Note: I think this is a no-op if no sCU component is between Suspense and Lazy cuz process() will sort the render such that Suspense and all its children are diffed first, then when the Lazy forceUpdate are handled, the component will no longer be marked "_dirty" so they will be skipped

@JoviDeCroock JoviDeCroock left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Thank you for always commenting on your own PR's it actually really helps out a lot in these cases! Awesome work

@sventschui sventschui left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Good work!


render(props, state) {
return state.Lazy ? h(state.Lazy, {}) : h(DefaultComponent, {});
return state.Lazy ? h(state.Lazy, props) : h(DefaultComponent, props);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Are props really meant to be passed down?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

That was my intention. Mimics what React.lazy allows: https://codesandbox.io/s/reactlazy-prop-passing-b8txb

@andrewiggins andrewiggins changed the title Suspended components should rerender through sCU (+10 B) Suspended components should rerender through sCU Feb 1, 2020
@JoviDeCroock JoviDeCroock merged commit fd741cc into master Feb 2, 2020
@JoviDeCroock JoviDeCroock deleted the fix/suspense-scu branch February 2, 2020 17:25
andrewiggins added a commit that referenced this pull request Feb 3, 2020
porfirioribeiro pushed a commit to porfirioribeiro/preact that referenced this pull request Feb 3, 2020
* Add test for suspending component through sCU blocking component

* Add test for passing props through Lazy

* Add test for using suspense with createContext

* Add tests for initially lazy and delayed lazy components with sCU and createContext

* Fix typo in unmounted component warning

* Add test for multi-suspend under sCU

* Improve debug suspense tests

* Force update all suspended components when suspension is complete (+31 B)
porfirioribeiro pushed a commit to porfirioribeiro/preact that referenced this pull request Feb 3, 2020
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.

Issue with Suspense + Lazy + @reach/router

5 participants