mirror of
https://github.com/facebook/react.git
synced 2026-02-25 13:13:03 +00:00
c8a035036d
Hoistables should never flush before the preamble however there is a surprisingly easy way to trigger this to happen by suspending in the shell of the app. This change modifies the flushing behavior to not emit any hoistables before the preamble has written. It accomplishes this by aborting the flush early if there are any pending root tasks remaining. It's unfortunate we need this extra condition but it's essential that we don't emit anything before the preamble and at the moment I don't see a way to do that without introducing a new condition. There is a test that began to fail with this update. It turns out that in node the root can be blocked during a resume even for a component inside a Suspense boundary if that boundary was part of the prerender. This means that with the current heuristic in this PR boundaries cannot be flushed during resume until the root is unblocked. This is not ideal but this is already how Edge works because the root blocks the stream in that case. This just makes Node deopt in a similar way to edge. We should improve this but we ought to do so in a way that works for edge too and it needs to be more comprehensive.
react-dom
This package serves as the entry point to the DOM and server renderers for React. It is intended to be paired with the generic React package, which is shipped as react to npm.
Installation
npm install react react-dom
Usage
In the browser
import { createRoot } from 'react-dom/client';
function App() {
return <div>Hello World</div>;
}
const root = createRoot(document.getElementById('root'));
root.render(<App />);
On the server
import { renderToPipeableStream } from 'react-dom/server';
function App() {
return <div>Hello World</div>;
}
function handleRequest(res) {
// ... in your server handler ...
const stream = renderToPipeableStream(<App />, {
onShellReady() {
res.statusCode = 200;
res.setHeader('Content-type', 'text/html');
stream.pipe(res);
},
// ...
});
}
API
react-dom
See https://react.dev/reference/react-dom
react-dom/client
See https://react.dev/reference/react-dom/client