Add ReactDOM.hydrate() as explicit SSR hydration API

src/renderers/__tests__/ReactCompositeComponent-test.js

@@ -15,6 +15,7 @@ var ChildUpdates;
 var MorphingComponent;
 var React;
 var ReactDOM;
+var ReactDOMFeatureFlags;
 var ReactDOMServer;
 var ReactCurrentOwner;
 var ReactTestUtils;
@@ -27,6 +28,7 @@ describe('ReactCompositeComponent', () => {
  jest.resetModules();
  React = require('react');
  ReactDOM = require('react-dom');
+ ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
  ReactDOMServer = require('react-dom/server');
  ReactCurrentOwner = require('react')
  .__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner;
@@ -116,11 +118,32 @@ describe('ReactCompositeComponent', () => {
  }
  }
 
+ spyOn(console, 'warn');
  var markup = ReactDOMServer.renderToString(<Parent />);
+
+ // Old API based on heuristic
  var container = document.createElement('div');
  container.innerHTML = markup;
-
  ReactDOM.render(<Parent />, container);
+ if (ReactDOMFeatureFlags.useFiber) {
+ expectDev(console.warn.calls.count()).toBe(1);
+ expectDev(console.warn.calls.argsFor(0)[0]).toContain(
+ 'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' +
+ 'will stop working in React v17. Replace the ReactDOM.render() call ' +
+ 'with ReactDOM.hydrate() if you want React to attach to the server HTML.',
+ );
+ } else {
+ expectDev(console.warn.calls.count()).toBe(0);
+ }
+
+ // New explicit API
+ console.warn.calls.reset();
+ if (ReactDOMFeatureFlags.useFiber) {
+ container = document.createElement('div');
+ container.innerHTML = markup;
+ ReactDOM.hydrate(<Parent />, container);
+ expectDev(console.warn.calls.count()).toBe(0);
+ }
  });
 
  it('should react to state changes from callbacks', () => {

src/renderers/dom/fiber/ReactDOMFiberEntry.js

@@ -37,7 +37,7 @@ var {
  DOCUMENT_NODE,
  DOCUMENT_FRAGMENT_NODE,
 } = require('HTMLNodeType');
-var {ID_ATTRIBUTE_NAME} = require('DOMProperty');
+var {ROOT_ATTRIBUTE_NAME} = require('DOMProperty');
 
 var findDOMNode = require('findDOMNode');
 var invariant = require('fbjs/lib/invariant');
@@ -58,6 +58,7 @@ var {
 var {precacheFiberNode, updateFiberProps} = ReactDOMComponentTree;
 
 if (__DEV__) {
+ var lowPriorityWarning = require('lowPriorityWarning');
  var warning = require('fbjs/lib/warning');
  var validateDOMNesting = require('validateDOMNesting');
  var {updatedAncestorInfo} = validateDOMNesting;
@@ -127,11 +128,11 @@ function getReactRootElementInContainer(container: any) {
  }
 }
 
-function shouldReuseContent(container) {
+function shouldHydrateDueToLegacyHeuristic(container) {
  const rootElement = getReactRootElementInContainer(container);
  return !!(rootElement &&
  rootElement.nodeType === ELEMENT_NODE &&
- rootElement.hasAttribute(ID_ATTRIBUTE_NAME));
+ rootElement.hasAttribute(ROOT_ATTRIBUTE_NAME));
 }
 
 function shouldAutoFocusHostComponent(type: string, props: Props): boolean {
@@ -523,10 +524,14 @@ ReactGenericBatching.injection.injectFiberBatchedUpdates(
  DOMRenderer.batchedUpdates,
 );
 
+var warnedAboutHydrateAPI = false;
+var warnedAboutEmptyContainer = false;
+
 function renderSubtreeIntoContainer(
  parentComponent: ?ReactComponent<any, any, any>,
  children: ReactNodeList,
  container: DOMContainer,
+ forceHydrate: boolean,
  callback: ?Function,
 ) {
  invariant(
@@ -577,17 +582,18 @@ function renderSubtreeIntoContainer(
 
  let root = container._reactRootContainer;
  if (!root) {
+ const shouldHydrate =
+ forceHydrate || shouldHydrateDueToLegacyHeuristic(container);
  // First clear any existing content.
- // TODO: Figure out the best heuristic here.
- if (!shouldReuseContent(container)) {
+ if (!shouldHydrate) {
  let warned = false;
  let rootSibling;
  while ((rootSibling = container.lastChild)) {
  if (__DEV__) {
  if (
  !warned &&
  rootSibling.nodeType === ELEMENT_NODE &&
- (rootSibling: any).hasAttribute(ID_ATTRIBUTE_NAME)
+ (rootSibling: any).hasAttribute(ROOT_ATTRIBUTE_NAME)
  ) {
  warned = true;
  warning(
@@ -601,6 +607,25 @@ function renderSubtreeIntoContainer(
  container.removeChild(rootSibling);
  }
  }
+ if (__DEV__) {
+ if (shouldHydrate && !forceHydrate && !warnedAboutHydrateAPI) {
+ warnedAboutHydrateAPI = true;
+ lowPriorityWarning(
+ false,
+ 'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' +
+ 'will stop working in React v17. Replace the ReactDOM.render() call ' +
+ 'with ReactDOM.hydrate() if you want React to attach to the server HTML.',
+ );
+ }
+ if (forceHydrate && !container.firstChild && !warnedAboutEmptyContainer) {
+ warnedAboutEmptyContainer = true;
+ warning(
+ false,
+ 'hydrate(): Expected to hydrate from server-rendered markup, but the passed ' +
+ 'DOM container node was empty. React will create the DOM from scratch.',
+ );
+ }
+ }
  const newRoot = DOMRenderer.createContainer(container);
  root = container._reactRootContainer = newRoot;
  // Initial mount should not be batched.
@@ -614,6 +639,15 @@ function renderSubtreeIntoContainer(
 }
 
 var ReactDOMFiber = {
+ hydrate(
+ element: ReactElement<any>,
+ container: DOMContainer,
+ callback: ?Function,
+ ) {
+ // TODO: throw or warn if we couldn't hydrate?
+ return renderSubtreeIntoContainer(null, element, container, true, callback);
+ },
+
  render(
  element: ReactElement<any>,
  container: DOMContainer,
@@ -651,7 +685,13 @@ var ReactDOMFiber = {
  }
  }
  }
- return renderSubtreeIntoContainer(null, element, container, callback);
+ return renderSubtreeIntoContainer(
+ null,
+ element,
+ container,
+ false,
+ callback,
+ );
  },
 
  unstable_renderSubtreeIntoContainer(
@@ -668,6 +708,7 @@ var ReactDOMFiber = {
  parentComponent,
  element,
  containerNode,
+ false,
  callback,
  );
  },
@@ -692,7 +733,7 @@ var ReactDOMFiber = {
 
  // Unmount should not be batched.
  DOMRenderer.unbatchedUpdates(() => {
- renderSubtreeIntoContainer(null, null, container, () => {
+ renderSubtreeIntoContainer(null, null, container, false, () => {
  container._reactRootContainer = null;
  });
  });

src/renderers/dom/shared/__tests__/ReactDOMComponentTree-test.js

@@ -11,6 +11,8 @@
 
 'use strict';
 
+var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
+
 describe('ReactDOMComponentTree', () => {
  var React;
  var ReactDOM;
@@ -21,7 +23,11 @@ describe('ReactDOMComponentTree', () => {
  var container = document.createElement('div');
  // Force server-rendering path:
  container.innerHTML = ReactDOMServer.renderToString(elt);
- return ReactDOM.render(elt, container);
+ if (ReactDOMFeatureFlags.useFiber) {
+ return ReactDOM.hydrate(elt, container);
+ } else {
+ return ReactDOM.render(elt, container);
+ }
  }
 
  function getTypeOf(instance) {

src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js

@@ -30,9 +30,13 @@ const COMMENT_NODE_TYPE = 8;
 // ====================================
 
 // promisified version of ReactDOM.render()
-function asyncReactDOMRender(reactElement, domElement) {
+function asyncReactDOMRender(reactElement, domElement, forceHydrate) {
  return new Promise(resolve => {
- ReactDOM.render(reactElement, domElement);
+ if (forceHydrate && ReactDOMFeatureFlags.useFiber) {
+ ReactDOM.hydrate(reactElement, domElement);
+ } else {
+ ReactDOM.render(reactElement, domElement);
+ }
  // We can't use the callback for resolution because that will not catch
  // errors. They're thrown.
  resolve();
@@ -68,10 +72,10 @@ async function expectErrors(fn, count) {
 
 // renders the reactElement into domElement, and expects a certain number of errors.
 // returns a Promise that resolves when the render is complete.
-function renderIntoDom(reactElement, domElement, errorCount = 0) {
+function renderIntoDom(reactElement, domElement, forceHydrate, errorCount = 0) {
  return expectErrors(async () => {
  ExecutionEnvironment.canUseDOM = true;
- await asyncReactDOMRender(reactElement, domElement);
+ await asyncReactDOMRender(reactElement, domElement, forceHydrate);
  ExecutionEnvironment.canUseDOM = false;
  return domElement.firstChild;
  }, errorCount);
@@ -135,7 +139,7 @@ async function streamRender(reactElement, errorCount = 0) {
 
 const clientCleanRender = (element, errorCount = 0) => {
  const div = document.createElement('div');
- return renderIntoDom(element, div, errorCount);
+ return renderIntoDom(element, div, false, errorCount);
 };
 
 const clientRenderOnServerString = async (element, errorCount = 0) => {
@@ -146,27 +150,23 @@ const clientRenderOnServerString = async (element, errorCount = 0) => {
  domElement.innerHTML = markup;
  let serverNode = domElement.firstChild;
 
- const firstClientNode = await renderIntoDom(element, domElement, errorCount);
+ const firstClientNode = await renderIntoDom(
+ element,
+ domElement,
+ true,
+ errorCount,
+ );
  let clientNode = firstClientNode;
 
  // Make sure all top level nodes match up
  while (serverNode || clientNode) {
  expect(serverNode != null).toBe(true);
  expect(clientNode != null).toBe(true);
  expect(clientNode.nodeType).toBe(serverNode.nodeType);
- if (clientNode.nodeType === TEXT_NODE_TYPE) {
- // Text nodes are stateless so we can just compare values.
- // This works around a current issue where hydration replaces top-level
- // text node, but otherwise works.
- // TODO: we can remove this branch if we add explicit hydration opt-in.
- // https:/facebook/react/issues/10189
- expect(serverNode.nodeValue).toBe(clientNode.nodeValue);
- } else {
- // Assert that the DOM element hasn't been replaced.
- // Note that we cannot use expect(serverNode).toBe(clientNode) because
- // of jest bug #1772.
- expect(serverNode === clientNode).toBe(true);
- }
+ // Assert that the DOM element hasn't been replaced.
+ // Note that we cannot use expect(serverNode).toBe(clientNode) because
+ // of jest bug #1772.
+ expect(serverNode === clientNode).toBe(true);
  serverNode = serverNode.nextSibling;
  clientNode = clientNode.nextSibling;
  }
@@ -180,15 +180,15 @@ const clientRenderOnBadMarkup = async (element, errorCount = 0) => {
  var domElement = document.createElement('div');
  domElement.innerHTML =
  '<div id="badIdWhichWillCauseMismatch" data-reactroot="" data-reactid="1"></div>';
- await renderIntoDom(element, domElement, errorCount + 1);
+ await renderIntoDom(element, domElement, true, errorCount + 1);
 
  // This gives us the resulting text content.
  var hydratedTextContent = domElement.textContent;
 
  // Next we render the element into a clean DOM node client side.
  const cleanDomElement = document.createElement('div');
  ExecutionEnvironment.canUseDOM = true;
- await asyncReactDOMRender(element, cleanDomElement);
+ await asyncReactDOMRender(element, cleanDomElement, true);
  ExecutionEnvironment.canUseDOM = false;
  // This gives us the expected text content.
  const cleanTextContent = cleanDomElement.textContent;
@@ -296,6 +296,7 @@ async function testMarkupMatch(serverElement, clientElement, shouldMatch) {
  return renderIntoDom(
  clientElement,
  domElement.parentNode,
+ true,
  shouldMatch ? 0 : 1,
  );
 }
@@ -1971,7 +1972,11 @@ describe('ReactDOMServerIntegration', () => {
 
  resetModules();
  // client render on top of the server markup.
- const clientField = await renderIntoDom(element, field.parentNode);
+ const clientField = await renderIntoDom(
+ element,
+ field.parentNode,
+ true,
+ );
  // verify that the input field was not replaced.
  // Note that we cannot use expect(clientField).toBe(field) because
  // of jest bug #1772
@@ -2330,6 +2335,7 @@ describe('ReactDOMServerIntegration', () => {
  await asyncReactDOMRender(
  <RefsComponent ref={e => (component = e)} />,
  root,
+ true,
  );
  expect(component.refs.myDiv).toBe(root.firstChild);
  });

src/renderers/dom/shared/__tests__/ReactDOMTextComponent-test.js

@@ -14,6 +14,7 @@
 var React;
 var ReactDOM;
 var ReactDOMServer;
+var ReactDOMFeatureFlags;
 
 // In standard React, TextComponent keeps track of different Text templates
 // using comments. However, in React Fiber, those comments are not outputted due
@@ -29,6 +30,7 @@ describe('ReactDOMTextComponent', () => {
  React = require('react');
  ReactDOM = require('react-dom');
  ReactDOMServer = require('react-dom/server');
+ ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
  });
 
  it('updates a mounted text component in place', () => {
@@ -117,15 +119,23 @@ describe('ReactDOMTextComponent', () => {
  var reactEl = <div>{'foo'}{'bar'}{'baz'}</div>;
  el.innerHTML = ReactDOMServer.renderToString(reactEl);
 
- ReactDOM.render(reactEl, el);
+ if (ReactDOMFeatureFlags.useFiber) {
+ ReactDOM.hydrate(reactEl, el);
+ } else {
+ ReactDOM.render(reactEl, el);
+ }
  expect(el.textContent).toBe('foobarbaz');
 
  ReactDOM.unmountComponentAtNode(el);
 
  reactEl = <div>{''}{''}{''}</div>;
  el.innerHTML = ReactDOMServer.renderToString(reactEl);
 
- ReactDOM.render(reactEl, el);
+ if (ReactDOMFeatureFlags.useFiber) {
+ ReactDOM.hydrate(reactEl, el);
+ } else {
+ ReactDOM.render(reactEl, el);
+ }
  expect(el.textContent).toBe('');
  });