fix: remove hydrate and render

necolas · Oct 28, 2024 · 3de2b70 · 3de2b70
1 parent 4432269
commit 3de2b70
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 39 deletions.
diff --git a/packages/react-native-web-docs/src/pages/docs/concepts/rendering.md b/packages/react-native-web-docs/src/pages/docs/concepts/rendering.md
@@ -13,7 +13,7 @@ Client and server rendering with {{ site.name }}.
 
 React Native for Web can be used for multi-platform and web-only applications. It can incrementally adopted by existing React Web apps and integrated with existing React Native apps. Preact is also supported.
 
-{{ site.name }} components interoperate with React DOM components. They can be incrementally introduced at any point in an application's component tree. One thing to be aware of is that external CSS applied to *all* tags in a document may interfere with the default rendering of some {{ site.name }} components.
+{{ site.name }} components interoperate with React DOM components. They can be incrementally introduced at any point in an application's component tree. One thing to be aware of is that external CSS applied to _all_ tags in a document may interfere with the default rendering of some {{ site.name }} components.
 
 ---
 
@@ -42,7 +42,7 @@ Or render individual components:
 import { render } from 'react-native';
 import Header from './src/Header';
 
-render(<Header />, document.getElementById('header'))
+render(<Header />, document.getElementById('header'));
 ```
 
 You might need to adjust the styles of the HTML document's root elements for your app to fill the viewport.
@@ -51,6 +51,8 @@ You might need to adjust the styles of the HTML document's root elements for you
 <html style="height:100%">
   <body style="height:100%">
     <div id="root" style="display:flex;height:100%"></div>
+  </body>
+</html>
 ```
 
 :::callout
@@ -72,7 +74,9 @@ import { AppRegistry } from 'react-native-web';
 AppRegistry.registerComponent('App', () => App);
 
 // prerender the app
-const { element, getStyleElement } = AppRegistry.getApplication('App', { initialProps });
+const { element, getStyleElement } = AppRegistry.getApplication('App', {
+  initialProps
+});
 // first the element
 const html = ReactDOMServer.renderToString(element);
 // then the styles (optionally include a nonce if your CSP policy requires it)
@@ -90,5 +94,5 @@ ${css}
 ${html}
 </div>
 <script nonce="${nonce}" src="${bundlePath}"></script>
-`
+`;
 ```
diff --git a/packages/react-native-web/src/exports/AppRegistry/renderApplication.js b/packages/react-native-web/src/exports/AppRegistry/renderApplication.js
@@ -12,7 +12,7 @@ import type { ComponentType, Node } from 'react';
 
 import AppContainer from './AppContainer';
 import invariant from 'fbjs/lib/invariant';
-import renderLegacy, { hydrateLegacy, render, hydrate } from '../render';
+import { render, hydrate } from '../render';
 import StyleSheet from '../StyleSheet';
 import React from 'react';
 
@@ -27,18 +27,11 @@ export default function renderApplication<Props: Object>(
   options: {
     hydrate: boolean,
     initialProps: Props,
-    mode: 'concurrent' | 'legacy',
     rootTag: any
   }
 ): Application {
-  const { hydrate: shouldHydrate, initialProps, mode, rootTag } = options;
-  const renderFn = shouldHydrate
-    ? mode === 'concurrent'
-      ? hydrate
-      : hydrateLegacy
-    : mode === 'concurrent'
-    ? render
-    : renderLegacy;
+  const { hydrate: shouldHydrate, initialProps, rootTag } = options;
+  const renderFn = shouldHydrate ? hydrate : render;
 
   invariant(rootTag, 'Expect to have a valid rootTag, instead got ', rootTag);
 

diff --git a/packages/react-native-web/src/exports/render/index.js b/packages/react-native-web/src/exports/render/index.js
@@ -9,16 +9,11 @@
 
 'use client';
 
-import {
-  hydrate as domLegacyHydrate,
-  render as domLegacyRender
-} from 'react-dom';
 import {
   createRoot as domCreateRoot,
   hydrateRoot as domHydrateRoot
 } from 'react-dom/client';
 
-import unmountComponentAtNode from '../unmountComponentAtNode';
 import { createSheet } from '../StyleSheet/dom';
 
 export function hydrate(element, root) {
@@ -32,23 +27,3 @@ export function render(element, root) {
   reactRoot.render(element);
   return reactRoot;
 }
-
-export function hydrateLegacy(element, root, callback) {
-  createSheet(root);
-  domLegacyHydrate(element, root, callback);
-  return {
-    unmount: function () {
-      return unmountComponentAtNode(root);
-    }
-  };
-}
-
-export default function renderLegacy(element, root, callback) {
-  createSheet(root);
-  domLegacyRender(element, root, callback);
-  return {
-    unmount: function () {
-      return unmountComponentAtNode(root);
-    }
-  };
-}