fixed ssr example

demo/serve.js

@@ -16,11 +16,10 @@ if (!port) {
 const app = express();
 
 app.get('/ssrComponent', (req, res) => {
-  const stream = ReactDomServer.renderToNodeStream(
+  const html = ReactDomServer.renderToString(
     React.createElement(DemoComponent, {text: 'hydrated hi'})
   );
-  stream.pipe(res, {end: false});
-  stream.on('end', () => res.end());
+  res.send(html);
 });
 
 const server = http.createServer(app);

demo/src/App.js

@@ -54,13 +54,18 @@ const defaultDemoName = 'bigList';
 const domElement = document.getElementById('demo');
 let reactDomRoot;
 
-function changeDemo(demoFn) {
+function changeDemo(demoFn, {shouldCreateRoot = true} = {}) {
   console.clear && console.clear(); // eslint-disable-line no-console
   React.__REVERT_WHY_DID_YOU_RENDER__ && React.__REVERT_WHY_DID_YOU_RENDER__();
   reactDomRoot?.unmount();
-  reactDomRoot = ReactDom.createRoot(domElement);
+  if (shouldCreateRoot) {
+    reactDomRoot = ReactDom.createRoot(domElement);
+  }
   setTimeout(() => {
-    demoFn({whyDidYouRender, reactDomRoot});
+    const reactDomRootPromise = demoFn({whyDidYouRender, domElement, reactDomRoot});
+    if (reactDomRootPromise) {
+      reactDomRootPromise.then(r => reactDomRoot = r);
+    }
   }, 1);
 }
 
@@ -70,10 +75,10 @@ if (!demoFromHash) {
   window.location.hash = defaultDemoName;
 }
 
-changeDemo(initialDemo.fn);
+changeDemo(initialDemo.fn, initialDemo.settings);
 
-const DemoLink = ({name, description, fn}) => (
-  <li><a href={`#${name}`} onClick={() => changeDemo(fn)}>{description}</a></li>
+const DemoLink = ({name, description, fn, settings}) => (
+  <li><a href={`#${name}`} onClick={() => changeDemo(fn, settings)}>{description}</a></li>
 );
 
 const App = () => (

demo/src/ssr/index.js

@@ -1,27 +1,32 @@
 import React from 'react';
-import ReactDom from 'react-dom';
+import ReactDom from 'react-dom/client';
 
 import createStepLogger from '../createStepLogger';
 
 import DemoComponent from './DemoComponent';
 
 export default {
   description: 'Server Side (hydrate)',
-  fn({reactDomRoot, domElement, whyDidYouRender}) {
+  fn({domElement, whyDidYouRender}) {
     const stepLogger = createStepLogger();
 
-    fetch('/ssrComponent')
+    return fetch('/ssrComponent')
       .then(response => response.text())
       .then(initialDemoHTML => {
         domElement.innerHTML = initialDemoHTML;
 
         whyDidYouRender(React);
 
         stepLogger('hydrate');
-        ReactDom.hydrate(<DemoComponent text="hydrated hi"/>, domElement);
+        const hydratedRoot = ReactDom.hydrateRoot(domElement, <DemoComponent text="hydrated hi"/>);
 
-        stepLogger('render with same props', true);
-        reactDomRoot.render(<DemoComponent text="hydrated hi"/>);
+        setTimeout(() => {
+          stepLogger('render with same props', true);
+          hydratedRoot.render(<DemoComponent text="hydrated hi"/>);
+        }, 1);
+
+        return hydratedRoot;
       });
   },
+  settings: {shouldCreateRoot: false},
 };