You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The official guidance for CSS-in-JS libraries with React 18 streaming is to incrementally insert styles in the stream at the right time. This isn't something that is exposed directly to users in frameworks like Next.js though.
To resolve that, we'll support a useFlushEffect hook:
This hook is called right before writing content generated by React
The hook can only be used by the Document component exported by pages/_document
Together with render prop support, this completes the picture for support for 3rd party CSS-in-JS libraries with React 18 + Suspense SSR and streaming. Documentation follows below.
Note: The hook is limited to Document in pages/_document because it only makes sense to flush additional arbitrary HTML during the initial SSR. On navigation, the client will generate them at runtime. In the future, we may wish to SSR content during navigation with Server Components, but Server Components may need affordances for that, and we'll likely want a more specific hook (such as useStylesheet) too.
Next.js provides support that CSS-in-JS libraries can leverage to streamline integration with applications. By convention, libraries should publish a utility (such as next-styled-jsx) that returns a flush effect and render prop the application can use:
The flush effect is called by Next.js before flushing HTML content rendered by React. The handler can return additional HTML or JSX that should be inserted before that content. The render prop should wrap the application to provide any necessary context for e.g. storing generated styles.
For example, the library code might look something like this:
devknoll
changed the title
Expose unstable_useFlush hook for 3rd party CSS-in-JS libraries to use with React 18
React 18: Expose unstable_useFlush hook for 3rd party CSS-in-JS libraries
Nov 5, 2021
devknoll
changed the title
React 18: Expose unstable_useFlush hook for 3rd party CSS-in-JS libraries
React 18: Expose useFlushEffect hook for 3rd party CSS-in-JS libraries
Nov 9, 2021
Implements #30997 with some minor tweaks to the design:
* The hook is moved to Client Components (e.g. `pages/_app` instead of `pages/_document`). This was a silly oversight in the original design: the hook needs to be called during server prerendering.
* `useFlushEffects` instead of `useFlushEffect` as there isn't a particularly safe way to implement the singular semantics as a Client Component hook given the current implementation of server rendering.
---
Fixes#30997
This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.
The official guidance for CSS-in-JS libraries with React 18 streaming is to incrementally insert styles in the stream at the right time. This isn't something that is exposed directly to users in frameworks like Next.js though.
To resolve that, we'll support a
useFlushEffect
hook:Document
component exported bypages/_document
Together with render prop support, this completes the picture for support for 3rd party CSS-in-JS libraries with React 18 + Suspense SSR and streaming. Documentation follows below.
Note: The hook is limited to
Document
inpages/_document
because it only makes sense to flush additional arbitrary HTML during the initial SSR. On navigation, the client will generate them at runtime. In the future, we may wish to SSR content during navigation with Server Components, but Server Components may need affordances for that, and we'll likely want a more specific hook (such asuseStylesheet
) too.Next.js provides support that CSS-in-JS libraries can leverage to streamline integration with applications. By convention, libraries should publish a utility (such as
next-styled-jsx
) that returns a flush effect and render prop the application can use:The flush effect is called by Next.js before flushing HTML content rendered by React. The handler can return additional HTML or JSX that should be inserted before that content. The render prop should wrap the application to provide any necessary context for e.g. storing generated styles.
For example, the library code might look something like this:
By convention, applications will use the utility like so:
Note: to avoid taking a dependency on Next.js, the
useFlushEffect
hook should only be added by applications, not libraries.The text was updated successfully, but these errors were encountered: