Remove hydrate() warning about empty container (#10345)
* Remove hydrate() warning about empty container It used to have false positives for cases where we legitimately don't render anything. * Use existing constant * Test empty string case using its parent
Dan Abramov committed
Aug 2, 2017 at 01:05 UTC
35e31336109a5277623652634703b358eceb193f
3 files changed
+16
-20
src/renderers/dom/fiber/ReactDOMFiberEntry.js
-9
@@ -525,7 +525,6 @@ ReactGenericBatching.injection.injectFiberBatchedUpdates(
525
);
526
527
var warnedAboutHydrateAPI = false;
528
-var warnedAboutEmptyContainer = false;
528
529
function renderSubtreeIntoContainer(
530
parentComponent: ?ReactComponent<any, any, any>,
@@ -617,14 +616,6 @@ function renderSubtreeIntoContainer(
616
'with ReactDOM.hydrate() if you want React to attach to the server HTML.',
617
);
618
}
620
- if (forceHydrate && !container.firstChild && !warnedAboutEmptyContainer) {
621
- warnedAboutEmptyContainer = true;
622
- warning(
623
- false,
624
- 'hydrate(): Expected to hydrate from server-rendered markup, but the passed ' +
625
- 'DOM container node was empty. React will create the DOM from scratch.',
626
- );
627
- }
619
}
620
const newRoot = DOMRenderer.createContainer(container);
621
root = container._reactRootContainer = newRoot;
src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
+16
@@ -455,6 +455,22 @@ describe('ReactDOMServerIntegration', () => {
455
expect(parent.childNodes[1].tagName).toBe('DIV');
456
expect(parent.childNodes[2].tagName).toBe('DIV');
457
});
458
+
459
+ itRenders('emptyish values', async render => {
460
+ let e = await render(0);
461
+ expect(e.nodeType).toBe(TEXT_NODE_TYPE);
462
+ expect(e.nodeValue).toMatch('0');
463
+
464
+ // Empty string is special because client renders a node
465
+ // but server returns empty HTML. So we compare parent text.
466
+ expect((await render(<div>{''}</div>)).textContent).toBe('');
467
+
468
+ expect(await render([])).toBe(null);
469
+ expect(await render(false)).toBe(null);
470
+ expect(await render(true)).toBe(null);
471
+ expect(await render(undefined)).toBe(null);
472
+ expect(await render([[[false]], undefined])).toBe(null);
473
+ });
474
}
475
});
476
src/renderers/dom/shared/__tests__/ReactRenderDocument-test.js
-11
@@ -327,17 +327,6 @@ describe('rendering React components at document', () => {
327
328
if (ReactDOMFeatureFlags.useFiber) {
329
describe('with new explicit hydration API', () => {
330
- it('warns if there is no server rendered markup to hydrate', () => {
331
- spyOn(console, 'error');
332
- const container = document.createElement('div');
333
- ReactDOM.hydrate(<div />, container);
334
- expectDev(console.error.calls.count()).toBe(1);
335
- expectDev(console.error.calls.argsFor(0)[0]).toContain(
336
- 'hydrate(): Expected to hydrate from server-rendered markup, but the passed ' +
337
- 'DOM container node was empty. React will create the DOM from scratch.',
338
- );
339
- });
340
-
330
it('should be able to adopt server markup', () => {
331
class Root extends React.Component {
332
render() {