mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Andrew ClarkandSebastian Markbåge
9ecf84ed7f
Fixes a bug that happens when you suspend in the shell (the part of the tree that is not wrapped in a Suspense boundary) during a discrete update. There were two underyling issues. One was just a mistake: RootDidNotComplete needs to be handled in both renderRootConcurrent and renderRootSync, but it was only handled in renderRootConcurrent. I did it this way because I thought this path was unreachable during a sync update, but I neglected to consider that renderRootSync is sometimes called for non-concurrent lanes, like when recovering from an error, or patching up a mutation to an external store. After I fixed that oversight, the other issue is that we intentionally error if the shell suspends during a sync update. The idea was that you should either wrap the tree in a Suspense boundary, or you should mark the update as a transition to allow React to suspend. However, this did not take into account selective hydration, which can force a sync render before anything has even committed. There's no way in that case to wrap the update in startTransition. Our solution for now is to remove the error that happens when you suspend in the shell during a sync update — even for discrete updates. We will likely revisit this in the future. One appealing possibility is to commit the whole root in an inert state, as if it were a hidden Offscreen tree. Co-authored-by: Sebastian Markbåge <sebastian@calyptus.eu> Co-authored-by: Sebastian Markbåge <sebastian@calyptus.eu>
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://reactjs.org/docs/react-dom.html
react-dom/client
See https://reactjs.org/docs/react-dom-client.html