Skip to content

Commit 11d2dd9

Browse files
committed
Remove data-reactroot from server rendering and hydration heuristic
This was used to implicitly hydrate if you call ReactDOM.render. We've had a warning to explicitly use ReactDOM.hydrate(...) instead of ReactDOM.render(...). We can now remove this from the generated markup. (And avoid adding it to Fizz.) This is a little strange to do now since we're trying hard to make the root API work the same. But if we kept it, we'd need to keep it in the generated output which adds unnecessary bytes. It also risks people relying on it, in the Fizz world where as this is an opportunity to create that clean state. We could possibly only keep it in the old server rendering APIs but then that creates an implicit dependency between which server API and which client API that you use. Currently you can really mix and match either way.
1 parent f227e7f commit 11d2dd9

16 files changed

+190
-617
lines changed

packages/react-dom/src/__tests__/ReactCompositeComponent-test.js

Lines changed: 0 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ let ChildUpdates;
1313
let MorphingComponent;
1414
let React;
1515
let ReactDOM;
16-
let ReactDOMServer;
1716
let ReactCurrentOwner;
1817
let ReactTestUtils;
1918
let PropTypes;
@@ -65,7 +64,6 @@ describe('ReactCompositeComponent', () => {
6564
jest.resetModules();
6665
React = require('react');
6766
ReactDOM = require('react-dom');
68-
ReactDOMServer = require('react-dom/server');
6967
ReactCurrentOwner = require('react')
7068
.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner;
7169
ReactTestUtils = require('react-dom/test-utils');
@@ -170,43 +168,6 @@ describe('ReactCompositeComponent', () => {
170168
expect(el.tagName).toBe('A');
171169
});
172170

173-
it('should not thrash a server rendered layout with client side one', () => {
174-
class Child extends React.Component {
175-
render() {
176-
return null;
177-
}
178-
}
179-
180-
class Parent extends React.Component {
181-
render() {
182-
return (
183-
<div>
184-
<Child />
185-
</div>
186-
);
187-
}
188-
}
189-
190-
const markup = ReactDOMServer.renderToString(<Parent />);
191-
192-
// Old API based on heuristic
193-
let container = document.createElement('div');
194-
container.innerHTML = markup;
195-
expect(() =>
196-
ReactDOM.render(<Parent />, container),
197-
).toWarnDev(
198-
'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' +
199-
'will stop working in React v18. Replace the ReactDOM.render() call ' +
200-
'with ReactDOM.hydrate() if you want React to attach to the server HTML.',
201-
{withoutStack: true},
202-
);
203-
204-
// New explicit API
205-
container = document.createElement('div');
206-
container.innerHTML = markup;
207-
ReactDOM.hydrate(<Parent />, container);
208-
});
209-
210171
it('should react to state changes from callbacks', () => {
211172
const container = document.createElement('div');
212173
document.body.appendChild(container);

packages/react-dom/src/__tests__/ReactLegacyContextDisabled-test.internal.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -139,9 +139,7 @@ describe('ReactLegacyContextDisabled', () => {
139139
'LegacyFnConsumer uses the legacy contextTypes API which is no longer supported. ' +
140140
'Use React.createContext() with React.useContext() instead.',
141141
]);
142-
expect(text).toBe(
143-
'<span data-reactroot="">{}<!-- -->undefined<!-- -->undefined</span>',
144-
);
142+
expect(text).toBe('<span>{}<!-- -->undefined<!-- -->undefined</span>');
145143
expect(lifecycleContextLog).toEqual([{}, {}, {}]);
146144
});
147145

0 commit comments

Comments
 (0)