feat: use react hooks to manage styles injection #720

huozhi · 2021-07-09T08:38:29Z

StyleSheetRegistry is an external state outside of react, to keep sync with react internal state, we'd better use reliable lifecycle to count the change instead of use cached class properties and render function to determine changes.

Lifecycle

first render -> add style
update -> remove then add
unmount -> remove

Problem

the issue is the react internal state might be different with the cached class properties this.prevProps, react might drop some render due to prioritise change, leading to tearing.

Notice

This PR only solved the effects issue when using the react under concurrent mode.

shuding · 2021-07-09T09:11:41Z

Is this caused by strict effects or is it something else? Could you link more references in the description? Would appreciate it!

componentWillUnmount is keeping called from react flushSyncCallbacks in react 18

package.json

Timer · 2021-07-09T17:46:35Z

If you end up dropping an old react version, make sure you add the following as a new line to the commit message when squash & merged:

BREAKING CHANGE: This change drops support for React 15.

Adding that line to the commit message will ensure this releases as a new major!

giuseppeg · 2021-07-14T12:00:36Z

src/style.js

-
-  render() {
-    // This is a workaround to make the side effect async safe in the "render" phase.
-    // See https://github.com/zeit/styled-jsx/pull/484


Please read the comment below and see if you can verify that everything works fine i.e. triggering layout in a parent component doesn't run transitions. Before this was due to the fact that styles are appended after the DOM is updated.

@sebmarkbage explained what's going on here #484 (comment) This is by the way the reason why I was adding and removing styles during rendering - I needed them to be in the page before the related component was committed/updated

useLayoutEffect is safer than useEffect here since useLayoutEffect inject the styles to DOM synchronously after DOM mutations which kind avoid the repaint happening very soon by browser.

We tried the jsfiddle example provided in that PR to test with react 17. If style injection happens in useEffect then it repaint but it doesn't repaint with useLayoutEffects.
https://codesandbox.io/s/react-17-repaint-demo-j21eq

Also found that emotion and styled-components both use useLayoutEffects to manage style injection. So I think this so be a fine solution so far? Before react releases any new hook for this case.

Transitions are still running when you trigger layout https://codesandbox.io/s/react-17-repaint-demo-forked-c716t?file=/src/App.js

I'll leave it to you to decide whether this is ok but if I remember correctly I had to come up with that hack (inject while rendering) because of a bug report from Vercel folks.

As Sebastian said in that comment, it's missing a good solution and it feels OK for styled-jsx at the moment, as it's more like an uncovered case of React. We should either look forward to an official React API for this, or avoid immediate layout triggering in the application code.

I'll approve this PR since there will be a much bigger issue with the current implementation when enabling concurrent rendering in React 18.

Sounds good!

src/style.js

shuding · 2021-07-20T17:21:05Z

src/style.js

+  if (typeof window === 'undefined') {
+    styleSheetRegistry.add(props)
+    return null


If we SSR the component, and somehow it's rendered multiple times (e.g. Suspense), will there be a problem?

The first time it is called add injects the styles into an in memory stylesheet. Future calls with the same props will just increment a counter

styled-jsx/src/stylesheet-registry.js

Lines 55 to 58 in 2741879

if (styleId in this._instancesCounts) {

this._instancesCounts[styleId] += 1

return

}

styled-jsx won't work with streaming rendering at the moment and perhaps suspense. I think it'd need a way to yield styles for the page while preserving a global state (registry) to avoid duplicates. I am open to collaborations if you'll ever need help with this.

Tested with suspense in react 18, looks good so far. As the anncoucement said effects hooks are reliable with suspense.
I use the streaming API with next.js to test it locally. But maybe the case is too simple.

@giuseppeg Would you mind make it more clear why you think it wouldn't work with streaming so far? Is it not safe to manage styles in memory even with hooks?

If we SSR the component, and somehow it's rendered multiple times (e.g. Suspense), will there be a problem?

To add more context to this, normally when we SSR all components will only be rendered once and there's no re-render. But with Suspense in the server side, it could be possible for a component to be re-rendered multiple times due to Suspense fallback and retry. In that case the counter will be wrongly counted. However since we won't have unmount in SSR and there's no style removal, so I think it's OK but I can't be 100% sure.

With CSR Suspense it won't be an issue though since we have every side effect inside the useLayoutEffect hook.

We will figure this out. 👍

I use the streaming API with next.js to test it locally

@huozhi interesting, I'd be curious to see how this works but in general I was thinking that as you stream HTML you'd need to flush styles (render style tags) but keep an in memory registry on the server so that you don't accidentally render the same styles in future chunks (imagine you have 4 instances of a Button component).

Probably this could be hacked with the current utils but styled-jsx doesn't do this out of the box at the moment.

Note: streaming means multiple renders can happen concurrently, so a global registry on the server is unworkable with Concurrent Mode.

I wonder why is that unworkable. When doing SSR, the registry doesn't need to track the order of renders or concurrency, it just need to work like a boolean (only add the style when the counter turns from 0 to 1) since there's no removal process.

Or does it mean multiple requests, when you say "multiple renders" here?

Yes, multiple requests can be being processed concurrently, so a singleton that tracks styles used wouldn’t work on the server, as other requests would read/write the same singleton.

This works in synchronous React because the render starts and ends synchronously. But in React 18 a tree could suspend while waiting for data.

Is it possible for the following race condition to happen?

big subtree starts rendering a Button which registers the styles

smaller subtree renders Button and is ready before 1.

the Button from 2. is unstyled

By the way a while ago I created a gist / PoC for a Style component that should work with streaming/suspense - I'll see if I can polish it and share it in the following days. As @devknoll mentioned it uses Context

Yeah... if that "smaller subtree renders Button and is ready before 1." is inside another Suspense boundary, it’s gonna be unstyled until it’s hydrated.

BREAKING CHANGE: This change drops support for React 15 and 16

package.json

giuseppeg

Check the peerDependencies comment and then feel free to merge. Remember to add the comment below when squashing

BREAKING CHANGE: This change drops support for React 15.

giuseppeg · 2021-08-04T10:30:27Z

@huozhi I am thinking that since there will be more breaking changes in the other PRs maybe we can create a canary release and once we merge all the changes necessary to support React18 we can cut a major release

huozhi · 2021-08-04T11:16:07Z

@giuseppeg yeah totally, @shuding and I were thinking the same thing. I'll update the alpha branch to support prereleases. 🙏

github-actions · 2021-08-04T13:21:50Z

🎉 This PR is included in version 4.0.0-alpha.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

* fix: safely remove style * remove props.children dep * BREAKING CHANGE: This change drops support for React version < 16.8.0

huozhi requested a review from giuseppeg as a code owner July 9, 2021 08:38

huozhi force-pushed the fix/deleted-style-id branch from 38bc460 to 9ab4a77 Compare July 9, 2021 08:41

huozhi marked this pull request as draft July 9, 2021 09:19

huozhi marked this pull request as ready for review July 9, 2021 14:19

shuding reviewed Jul 9, 2021

View reviewed changes

package.json Outdated Show resolved Hide resolved

huozhi force-pushed the fix/deleted-style-id branch from 8a93b81 to 1ded933 Compare July 9, 2021 14:29

huozhi marked this pull request as draft July 13, 2021 14:46

huozhi force-pushed the fix/deleted-style-id branch from 629c0b9 to e47f2c1 Compare July 13, 2021 15:10

huozhi marked this pull request as ready for review July 13, 2021 15:26

giuseppeg reviewed Jul 14, 2021

View reviewed changes

shuding reviewed Jul 20, 2021

View reviewed changes

huozhi force-pushed the fix/deleted-style-id branch from 74c1e9a to e31dbb6 Compare July 22, 2021 11:13

huozhi mentioned this pull request Jul 22, 2021

feat: contextual styled-jsx #721

Merged

fix: safely remove style

30d4d40

BREAKING CHANGE: This change drops support for React 15 and 16

huozhi force-pushed the fix/deleted-style-id branch from 11aa92b to 30d4d40 Compare August 3, 2021 08:44

remove props.children dep

551ba5d

giuseppeg reviewed Aug 4, 2021

View reviewed changes

package.json Outdated Show resolved Hide resolved

giuseppeg previously approved these changes Aug 4, 2021

View reviewed changes

BREAKING CHANGE: This change drops support for React version < 16.8.0

48c7df8

huozhi dismissed giuseppeg’s stale review via 48c7df8 August 4, 2021 08:58

giuseppeg approved these changes Aug 4, 2021

View reviewed changes

huozhi changed the base branch from master to next August 4, 2021 12:07

huozhi changed the title ~~fix: safely remove style~~ feat: use react hooks to manage styles injection Aug 4, 2021

huozhi deleted the branch vercel:alpha August 4, 2021 12:13

huozhi closed this Aug 4, 2021

huozhi reopened this Aug 4, 2021

huozhi changed the base branch from next to alpha August 4, 2021 12:19

huozhi force-pushed the alpha branch 2 times, most recently from 0b28b97 to 20396d2 Compare August 4, 2021 13:12

huozhi merged commit bdc8d5d into vercel:alpha Aug 4, 2021

huozhi deleted the fix/deleted-style-id branch August 4, 2021 13:19

github-actions bot added the released on @alpha label Aug 4, 2021

Timer pushed a commit that referenced this pull request Aug 9, 2021

feat: use react hooks to manage styles injection (#720)

5bec05b

* fix: safely remove style * remove props.children dep * BREAKING CHANGE: This change drops support for React version < 16.8.0

huozhi added a commit that referenced this pull request Aug 9, 2021

feat: use react hooks to manage styles injection (#720)

48a2599

* fix: safely remove style * remove props.children dep * BREAKING CHANGE: This change drops support for React version < 16.8.0

danqing mentioned this pull request Oct 10, 2021

Hook injection makes certain styles not being applied properly #752

Closed

huozhi mentioned this pull request Oct 19, 2021

feat: opt in insertion effect hook when available #753

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: use react hooks to manage styles injection #720

feat: use react hooks to manage styles injection #720

huozhi commented Jul 9, 2021 •

edited

shuding commented Jul 9, 2021

Timer commented Jul 9, 2021

giuseppeg Jul 14, 2021

huozhi Jul 14, 2021 •

edited

giuseppeg Jul 14, 2021 •

edited

shuding Jul 20, 2021

giuseppeg Jul 21, 2021

shuding Jul 20, 2021

giuseppeg Jul 21, 2021

huozhi Jul 21, 2021 •

edited

shuding Jul 21, 2021

giuseppeg Jul 21, 2021

shuding Jul 21, 2021

devknoll Jul 21, 2021

devknoll Jul 21, 2021

giuseppeg Jul 22, 2021 •

edited

shuding Jul 22, 2021

giuseppeg left a comment

giuseppeg commented Aug 4, 2021

huozhi commented Aug 4, 2021 •

edited

github-actions bot commented Aug 4, 2021

	if (styleId in this._instancesCounts) {
	this._instancesCounts[styleId] += 1
	return
	}

feat: use react hooks to manage styles injection #720

feat: use react hooks to manage styles injection #720

Conversation

huozhi commented Jul 9, 2021 • edited

Lifecycle

Problem

Notice

shuding commented Jul 9, 2021

Timer commented Jul 9, 2021

Choose a reason for hiding this comment

huozhi Jul 14, 2021 • edited

Choose a reason for hiding this comment

giuseppeg Jul 14, 2021 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

huozhi Jul 21, 2021 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

giuseppeg Jul 22, 2021 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

giuseppeg left a comment

Choose a reason for hiding this comment

giuseppeg commented Aug 4, 2021

huozhi commented Aug 4, 2021 • edited

github-actions bot commented Aug 4, 2021

huozhi commented Jul 9, 2021 •

edited

huozhi Jul 14, 2021 •

edited

giuseppeg Jul 14, 2021 •

edited

huozhi Jul 21, 2021 •

edited

giuseppeg Jul 22, 2021 •

edited

huozhi commented Aug 4, 2021 •

edited