https://github.com/stereobooster/react-async-issue
https://github.com/stereobooster/react-async-issue
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/stereobooster/react-async-issue
- Owner: stereobooster
- Created: 2018-12-13T22:40:50.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-12-14T14:53:42.000Z (over 6 years ago)
- Last Synced: 2025-02-11T14:47:16.383Z (4 months ago)
- Language: JavaScript
- Homepage: https://stereobooster.github.io/react-async-issue/
- Size: 624 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Experiment
Here is the classical issue with async components in React.
When React application boots (`ReactDOM.render`) and some components are not loaded, it will flush current available components, which can be some loader or empty screen (`null`). If there was some HTML before (SSR or prerendered with react-snap) user will see flash of white screen.
I created this filmstrip with the help of https://www.webpagetest.org/.
### Suspense
I expected that `Suspense` would solve this issue, because it suppose to pause rendering. So I hopped it will not flush placeholder while it waits for subcomponent to load.
On the other side - I know that Suspense and asynchronous rendering is not finished yet, so I hope it will be fixed in the future.
### Unstable ConcurrentMode
After poking around, it seems I found solution (which is marked as `unstable`).
```js
const ConcurrentMode = React.unstable_ConcurrentMode;
const Root = (
);
const rootElement = document.getElementById("root");
const root = ReactDom.unstable_createRoot(rootElement, { hydrate: true });
root.render(Root);
```
The problem was, that before I tried separately `React.unstable_ConcurrentMode` and `unstable_createRoot`, but not together.
### Hydrate vs re-render
If you use prerendering instead of SSR, there is a chance that client side rendered HTML can be slightly different than prerendered one (which, I guess, bad practice).
The simplest example, can look like this:
```js
```
As the result `ReactDom.unstable_createRoot(rootElement, { hydrate: true })` will produce `green` div. The only way to avoid this is to "re-render" (which is less performant than hydrate).
```js
const root = ReactDom.unstable_createRoot(rootElement);
// this is hacky to fix double copy of
const callback = rootElement.hasChildNodes()
? () => rootElement.removeChild(rootElement.firstChild)
: () => {};
root.render(Root, callback);
```
If you will not use the hack it will result in two copies of `
` one green (from pre-rendering) and one blue (from re-rendering).
