Skip to content

Commit 3de2b70

Browse files
committed
fix: remove hydrate and render
1 parent 4432269 commit 3de2b70

File tree

3 files changed

+11
-39
lines changed

3 files changed

+11
-39
lines changed

packages/react-native-web-docs/src/pages/docs/concepts/rendering.md

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ Client and server rendering with {{ site.name }}.
1313

1414
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.
1515

16-
{{ 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.
16+
{{ 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.
1717

1818
---
1919

@@ -42,7 +42,7 @@ Or render individual components:
4242
import { render } from 'react-native';
4343
import Header from './src/Header';
4444

45-
render(<Header />, document.getElementById('header'))
45+
render(<Header />, document.getElementById('header'));
4646
```
4747

4848
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
5151
<html style="height:100%">
5252
<body style="height:100%">
5353
<div id="root" style="display:flex;height:100%"></div>
54+
</body>
55+
</html>
5456
```
5557

5658
:::callout
@@ -72,7 +74,9 @@ import { AppRegistry } from 'react-native-web';
7274
AppRegistry.registerComponent('App', () => App);
7375

7476
// prerender the app
75-
const { element, getStyleElement } = AppRegistry.getApplication('App', { initialProps });
77+
const { element, getStyleElement } = AppRegistry.getApplication('App', {
78+
initialProps
79+
});
7680
// first the element
7781
const html = ReactDOMServer.renderToString(element);
7882
// then the styles (optionally include a nonce if your CSP policy requires it)
@@ -90,5 +94,5 @@ ${css}
9094
${html}
9195
</div>
9296
<script nonce="${nonce}" src="${bundlePath}"></script>
93-
`
97+
`;
9498
```

packages/react-native-web/src/exports/AppRegistry/renderApplication.js

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import type { ComponentType, Node } from 'react';
1212

1313
import AppContainer from './AppContainer';
1414
import invariant from 'fbjs/lib/invariant';
15-
import renderLegacy, { hydrateLegacy, render, hydrate } from '../render';
15+
import { render, hydrate } from '../render';
1616
import StyleSheet from '../StyleSheet';
1717
import React from 'react';
1818

@@ -27,18 +27,11 @@ export default function renderApplication<Props: Object>(
2727
options: {
2828
hydrate: boolean,
2929
initialProps: Props,
30-
mode: 'concurrent' | 'legacy',
3130
rootTag: any
3231
}
3332
): Application {
34-
const { hydrate: shouldHydrate, initialProps, mode, rootTag } = options;
35-
const renderFn = shouldHydrate
36-
? mode === 'concurrent'
37-
? hydrate
38-
: hydrateLegacy
39-
: mode === 'concurrent'
40-
? render
41-
: renderLegacy;
33+
const { hydrate: shouldHydrate, initialProps, rootTag } = options;
34+
const renderFn = shouldHydrate ? hydrate : render;
4235

4336
invariant(rootTag, 'Expect to have a valid rootTag, instead got ', rootTag);
4437

packages/react-native-web/src/exports/render/index.js

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,11 @@
99

1010
'use client';
1111

12-
import {
13-
hydrate as domLegacyHydrate,
14-
render as domLegacyRender
15-
} from 'react-dom';
1612
import {
1713
createRoot as domCreateRoot,
1814
hydrateRoot as domHydrateRoot
1915
} from 'react-dom/client';
2016

21-
import unmountComponentAtNode from '../unmountComponentAtNode';
2217
import { createSheet } from '../StyleSheet/dom';
2318

2419
export function hydrate(element, root) {
@@ -32,23 +27,3 @@ export function render(element, root) {
3227
reactRoot.render(element);
3328
return reactRoot;
3429
}
35-
36-
export function hydrateLegacy(element, root, callback) {
37-
createSheet(root);
38-
domLegacyHydrate(element, root, callback);
39-
return {
40-
unmount: function () {
41-
return unmountComponentAtNode(root);
42-
}
43-
};
44-
}
45-
46-
export default function renderLegacy(element, root, callback) {
47-
createSheet(root);
48-
domLegacyRender(element, root, callback);
49-
return {
50-
unmount: function () {
51-
return unmountComponentAtNode(root);
52-
}
53-
};
54-
}

0 commit comments

Comments
 (0)