From 5aeebed7dff270a7b1f4e852ee67ac22653c4023 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sema@fb.com>
Date: Tue, 6 Jun 2017 14:32:23 -0700
Subject: [PATCH 1/2] Don't hydrate any properties other than event listeners
 and text content

This strategy assumes that the rendered HTML is correct if the tree lines
up. Therefore we don't diff any attributes of the rendered HTML.

However, as a precaution I ensure that textContent *is* updated. This
ensures that if something goes wrong with keys lining up etc. at least
there is some feedback that the event handlers might not line up. With
what you expect. This might not be what you want e.g. for date formatting
where it can different between server and client.

It is expected that content will line up. To ensure that I will in a follow
up ensure that the warning is issued if it doesn't line up so that in
development this can be addressed.

The text content updates are now moved to the commit phase so if the tree
is asynchronously hydrated it doesn't start partially swapping out. I use
the regular update side-effect with payload if the content doesn't match up.

Since we no longer guarantee that attributes is correct I changed the
bad mark up SSR integration tests to only assert on the textContent
instead.
---
 scripts/fiber/tests-failing.txt               |   6 +-
 scripts/fiber/tests-passing.txt               |   4 +
 src/renderers/dom/fiber/ReactDOMFiber.js      |   9 +-
 .../dom/fiber/ReactDOMFiberComponent.js       | 138 +++++++++++++++++-
 .../dom/fiber/wrappers/ReactDOMFiberInput.js  |   2 +-
 .../dom/fiber/wrappers/ReactDOMFiberOption.js |   2 +-
 .../dom/fiber/wrappers/ReactDOMFiberSelect.js |   6 +-
 .../fiber/wrappers/ReactDOMFiberTextarea.js   |   2 +-
 .../ReactDOMServerIntegration-test.js         |  41 +++++-
 .../shared/fiber/ReactFiberBeginWork.js       |   2 +-
 .../shared/fiber/ReactFiberCommitWork.js      |  18 ++-
 .../shared/fiber/ReactFiberCompleteWork.js    |  35 +++--
 .../fiber/ReactFiberHydrationContext.js       |  42 ++++--
 .../shared/fiber/ReactFiberReconciler.js      |   5 +-
 .../shared/fiber/ReactFiberScheduler.js       |   8 +-
 15 files changed, 256 insertions(+), 64 deletions(-)

diff --git a/scripts/fiber/tests-failing.txt b/scripts/fiber/tests-failing.txt
index 789af77694f0..8b137891791f 100644
--- a/scripts/fiber/tests-failing.txt
+++ b/scripts/fiber/tests-failing.txt
@@ -1,5 +1 @@
-src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
-* should not blow away user-entered text on successful reconnect to an uncontrolled checkbox
-* should not blow away user-entered text on successful reconnect to a controlled checkbox
-* should not blow away user-selected value on successful reconnect to an uncontrolled select
-* should not blow away user-selected value on successful reconnect to an controlled select
+
diff --git a/scripts/fiber/tests-passing.txt b/scripts/fiber/tests-passing.txt
index 930fb89124d8..4f724b760d07 100644
--- a/scripts/fiber/tests-passing.txt
+++ b/scripts/fiber/tests-passing.txt
@@ -1226,6 +1226,10 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
 * renders a controlled select with client render on top of good server markup
 * should not blow away user-entered text on successful reconnect to an uncontrolled input
 * should not blow away user-entered text on successful reconnect to a controlled input
+* should not blow away user-entered text on successful reconnect to an uncontrolled checkbox
+* should not blow away user-entered text on successful reconnect to a controlled checkbox
+* should not blow away user-selected value on successful reconnect to an uncontrolled select
+* should not blow away user-selected value on successful reconnect to an controlled select
 * renders class child with context with server string render
 * renders class child with context with clean client render
 * renders class child with context with client render on top of good server markup
diff --git a/src/renderers/dom/fiber/ReactDOMFiber.js b/src/renderers/dom/fiber/ReactDOMFiber.js
index b17a2d40f6d2..31cafd4873e1 100644
--- a/src/renderers/dom/fiber/ReactDOMFiber.js
+++ b/src/renderers/dom/fiber/ReactDOMFiber.js
@@ -48,6 +48,7 @@ var {
   setInitialProperties,
   diffProperties,
   updateProperties,
+  diffHydratedProperties,
 } = ReactDOMFiberComponent;
 var {precacheFiberNode, updateFiberProps} = ReactDOMComponentTree;
 
@@ -409,19 +410,21 @@ var DOMRenderer = ReactFiberReconciler({
     props: Props,
     rootContainerInstance: Container,
     internalInstanceHandle: Object,
-  ): void {
+  ): null | Array<mixed> {
     precacheFiberNode(internalInstanceHandle, instance);
     // TODO: Possibly defer this until the commit phase where all the events
     // get attached.
     updateFiberProps(instance, props);
-    setInitialProperties(instance, type, props, rootContainerInstance);
+    return diffHydratedProperties(instance, type, props, rootContainerInstance);
   },
 
   hydrateTextInstance(
     textInstance: TextInstance,
+    text: string,
     internalInstanceHandle: Object,
-  ): void {
+  ): boolean {
     precacheFiberNode(internalInstanceHandle, textInstance);
+    return textInstance.nodeValue !== text;
   },
 
   scheduleAnimationCallback: ReactDOMFrameScheduling.rAF,
diff --git a/src/renderers/dom/fiber/ReactDOMFiberComponent.js b/src/renderers/dom/fiber/ReactDOMFiberComponent.js
index 5c29bd810f8d..2406de28db1a 100644
--- a/src/renderers/dom/fiber/ReactDOMFiberComponent.js
+++ b/src/renderers/dom/fiber/ReactDOMFiberComponent.js
@@ -177,10 +177,10 @@ function setInitialDOMProperties(
   isCustomComponentTag: boolean,
 ): void {
   for (var propKey in nextProps) {
-    var nextProp = nextProps[propKey];
     if (!nextProps.hasOwnProperty(propKey)) {
       continue;
     }
+    var nextProp = nextProps[propKey];
     if (propKey === STYLE) {
       if (__DEV__) {
         if (nextProp) {
@@ -406,7 +406,7 @@ var ReactDOMFiberComponent = {
         props = rawProps;
         break;
       case 'input':
-        ReactDOMFiberInput.mountWrapper(domElement, rawProps);
+        ReactDOMFiberInput.initWrapperState(domElement, rawProps);
         props = ReactDOMFiberInput.getHostProps(domElement, rawProps);
         trapBubbledEventsLocal(domElement, tag);
         // For controlled components we always need to ensure we're listening
@@ -414,11 +414,11 @@ var ReactDOMFiberComponent = {
         ensureListeningTo(rootContainerElement, 'onChange');
         break;
       case 'option':
-        ReactDOMFiberOption.mountWrapper(domElement, rawProps);
+        ReactDOMFiberOption.validateProps(domElement, rawProps);
         props = ReactDOMFiberOption.getHostProps(domElement, rawProps);
         break;
       case 'select':
-        ReactDOMFiberSelect.mountWrapper(domElement, rawProps);
+        ReactDOMFiberSelect.initWrapperState(domElement, rawProps);
         props = ReactDOMFiberSelect.getHostProps(domElement, rawProps);
         trapBubbledEventsLocal(domElement, tag);
         // For controlled components we always need to ensure we're listening
@@ -426,7 +426,7 @@ var ReactDOMFiberComponent = {
         ensureListeningTo(rootContainerElement, 'onChange');
         break;
       case 'textarea':
-        ReactDOMFiberTextarea.mountWrapper(domElement, rawProps);
+        ReactDOMFiberTextarea.initWrapperState(domElement, rawProps);
         props = ReactDOMFiberTextarea.getHostProps(domElement, rawProps);
         trapBubbledEventsLocal(domElement, tag);
         // For controlled components we always need to ensure we're listening
@@ -462,6 +462,9 @@ var ReactDOMFiberComponent = {
       case 'option':
         ReactDOMFiberOption.postMountWrapper(domElement, rawProps);
         break;
+      case 'select':
+        ReactDOMFiberSelect.postMountWrapper(domElement, rawProps);
+        break;
       default:
         if (typeof props.onClick === 'function') {
           // TODO: This cast may not be sound for SVG, MathML or custom elements.
@@ -704,6 +707,131 @@ var ReactDOMFiberComponent = {
     }
   },
 
+  diffHydratedProperties(
+    domElement: Element,
+    tag: string,
+    rawProps: Object,
+    rootContainerElement: Element | Document,
+  ): null | Array<mixed> {
+    if (__DEV__) {
+      var isCustomComponentTag = isCustomComponent(tag, rawProps);
+      validatePropertiesInDevelopment(tag, rawProps);
+      if (isCustomComponentTag && !didWarnShadyDOM && domElement.shadyRoot) {
+        warning(
+          false,
+          '%s is using shady DOM. Using shady DOM with React can ' +
+            'cause things to break subtly.',
+          getCurrentFiberOwnerName() || 'A component',
+        );
+        didWarnShadyDOM = true;
+      }
+    }
+
+    switch (tag) {
+      case 'audio':
+      case 'form':
+      case 'iframe':
+      case 'img':
+      case 'image':
+      case 'link':
+      case 'object':
+      case 'source':
+      case 'video':
+      case 'details':
+        trapBubbledEventsLocal(domElement, tag);
+        break;
+      case 'input':
+        ReactDOMFiberInput.initWrapperState(domElement, rawProps);
+        trapBubbledEventsLocal(domElement, tag);
+        // For controlled components we always need to ensure we're listening
+        // to onChange. Even if there is no listener.
+        ensureListeningTo(rootContainerElement, 'onChange');
+        break;
+      case 'option':
+        ReactDOMFiberOption.validateProps(domElement, rawProps);
+        break;
+      case 'select':
+        ReactDOMFiberSelect.initWrapperState(domElement, rawProps);
+        trapBubbledEventsLocal(domElement, tag);
+        // For controlled components we always need to ensure we're listening
+        // to onChange. Even if there is no listener.
+        ensureListeningTo(rootContainerElement, 'onChange');
+        break;
+      case 'textarea':
+        ReactDOMFiberTextarea.initWrapperState(domElement, rawProps);
+        trapBubbledEventsLocal(domElement, tag);
+        // For controlled components we always need to ensure we're listening
+        // to onChange. Even if there is no listener.
+        ensureListeningTo(rootContainerElement, 'onChange');
+        break;
+    }
+
+    assertValidProps(tag, rawProps, getCurrentFiberOwnerName);
+
+    var updatePayload = null;
+    for (var propKey in rawProps) {
+      if (!rawProps.hasOwnProperty(propKey)) {
+        continue;
+      }
+      var nextProp = rawProps[propKey];
+      if (propKey === CHILDREN) {
+        // For text content children we compare against textContent. This
+        // might match additional HTML that is hidden when we read it using
+        // textContent. E.g. "foo" will match "f<span>oo</span>" but that still
+        // satisfies our requirement. Our requirement is not to produce perfect
+        // HTML and attributes. Ideally we should preserve structure but it's
+        // ok not to if the visible content is still enough to indicate what
+        // even listeners these nodes might be wired up to.
+        // TODO: Warn if there is more than a single textNode as a child.
+        // TODO: Should we use domElement.firstChild.nodeValue to compare?
+        if (typeof nextProp === 'string') {
+          if (domElement.textContent !== nextProp) {
+            updatePayload = [CHILDREN, nextProp];
+          }
+        } else if (typeof nextProp === 'number') {
+          if (domElement.textContent !== '' + nextProp) {
+            updatePayload = [CHILDREN, '' + nextProp];
+          }
+        }
+      } else if (registrationNameModules.hasOwnProperty(propKey)) {
+        if (nextProp) {
+          ensureListeningTo(rootContainerElement, propKey);
+        }
+      }
+    }
+
+    switch (tag) {
+      case 'input':
+        // TODO: Make sure we check if this is still unmounted or do any clean
+        // up necessary since we never stop tracking anymore.
+        inputValueTracking.trackNode((domElement: any));
+        ReactDOMFiberInput.postMountWrapper(domElement, rawProps);
+        break;
+      case 'textarea':
+        // TODO: Make sure we check if this is still unmounted or do any clean
+        // up necessary since we never stop tracking anymore.
+        inputValueTracking.trackNode((domElement: any));
+        ReactDOMFiberTextarea.postMountWrapper(domElement, rawProps);
+        break;
+      case 'select':
+      case 'option':
+        // For input and textarea we current always set the value property at
+        // post mount to force it to diverge from attributes. However, for
+        // option and select we don't quite do the same thing and select
+        // is not resilient to the DOM state changing so we don't do that here.
+        // TODO: Consider not doing this for input and textarea.
+        break;
+      default:
+        if (typeof rawProps.onClick === 'function') {
+          // TODO: This cast may not be sound for SVG, MathML or custom elements.
+          trapClickOnNonInteractiveElement(((domElement: any): HTMLElement));
+        }
+        break;
+    }
+
+    return updatePayload;
+  },
+
   restoreControlledState(
     domElement: Element,
     tag: string,
diff --git a/src/renderers/dom/fiber/wrappers/ReactDOMFiberInput.js b/src/renderers/dom/fiber/wrappers/ReactDOMFiberInput.js
index 17b0f3df0250..df430502db33 100644
--- a/src/renderers/dom/fiber/wrappers/ReactDOMFiberInput.js
+++ b/src/renderers/dom/fiber/wrappers/ReactDOMFiberInput.js
@@ -89,7 +89,7 @@ var ReactDOMInput = {
     return hostProps;
   },
 
-  mountWrapper: function(element: Element, props: Object) {
+  initWrapperState: function(element: Element, props: Object) {
     if (__DEV__) {
       ReactControlledValuePropTypes.checkPropTypes(
         'input',
diff --git a/src/renderers/dom/fiber/wrappers/ReactDOMFiberOption.js b/src/renderers/dom/fiber/wrappers/ReactDOMFiberOption.js
index 7f0a25935a22..781f94924d14 100644
--- a/src/renderers/dom/fiber/wrappers/ReactDOMFiberOption.js
+++ b/src/renderers/dom/fiber/wrappers/ReactDOMFiberOption.js
@@ -39,7 +39,7 @@ function flattenChildren(children) {
  * Implements an <option> host component that warns when `selected` is set.
  */
 var ReactDOMOption = {
-  mountWrapper: function(element: Element, props: Object) {
+  validateProps: function(element: Element, props: Object) {
     // TODO (yungsters): Remove support for `selected` in <option>.
     if (__DEV__) {
       warning(
diff --git a/src/renderers/dom/fiber/wrappers/ReactDOMFiberSelect.js b/src/renderers/dom/fiber/wrappers/ReactDOMFiberSelect.js
index 7cf83e20ef01..43d203c02eeb 100644
--- a/src/renderers/dom/fiber/wrappers/ReactDOMFiberSelect.js
+++ b/src/renderers/dom/fiber/wrappers/ReactDOMFiberSelect.js
@@ -136,7 +136,7 @@ var ReactDOMSelect = {
     });
   },
 
-  mountWrapper: function(element: Element, props: Object) {
+  initWrapperState: function(element: Element, props: Object) {
     var node = ((element: any): SelectWithWrapperState);
     if (__DEV__) {
       checkSelectPropTypes(props);
@@ -163,8 +163,12 @@ var ReactDOMSelect = {
       );
       didWarnValueDefaultValue = true;
     }
+  },
 
+  postMountWrapper: function(element: Element, props: Object) {
+    var node = ((element: any): SelectWithWrapperState);
     node.multiple = !!props.multiple;
+    var value = props.value;
     if (value != null) {
       updateOptions(node, !!props.multiple, value);
     } else if (props.defaultValue != null) {
diff --git a/src/renderers/dom/fiber/wrappers/ReactDOMFiberTextarea.js b/src/renderers/dom/fiber/wrappers/ReactDOMFiberTextarea.js
index 2f99352a0aaa..2fe5301270f0 100644
--- a/src/renderers/dom/fiber/wrappers/ReactDOMFiberTextarea.js
+++ b/src/renderers/dom/fiber/wrappers/ReactDOMFiberTextarea.js
@@ -66,7 +66,7 @@ var ReactDOMTextarea = {
     return hostProps;
   },
 
-  mountWrapper: function(element: Element, props: Object) {
+  initWrapperState: function(element: Element, props: Object) {
     var node = ((element: any): TextAreaWithWrapperState);
     if (__DEV__) {
       ReactControlledValuePropTypes.checkPropTypes(
diff --git a/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js b/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
index e4ee8c83cb78..dd9bb11b2a41 100644
--- a/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
+++ b/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
@@ -106,11 +106,31 @@ const clientRenderOnServerString = async (element, errorCount = 0) => {
   return clientElement;
 };
 
-const clientRenderOnBadMarkup = (element, errorCount = 0) => {
+function BadMarkupExpected() {}
+
+const clientRenderOnBadMarkup = async (element, errorCount = 0) => {
+  // First we render the top of bad mark up.
   var domElement = document.createElement('div');
   domElement.innerHTML =
-    '<div id="badIdWhichWillCauseMismatch" data-reactroot="" data-reactid="1"></div>';
-  return renderIntoDom(element, domElement, errorCount + 1);
+    '<div id="badIdWhichWillCauseMismatch" data-reactroot="" data-reactid="1">Foo</div>';
+  await renderIntoDom(element, domElement, 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);
+  ExecutionEnvironment.canUseDOM = false;
+  // This gives us the expected text content.
+  const cleanTextContent = cleanDomElement.textContent;
+
+  // The only guarantee is that text content has been patched up if needed.
+  expect(hydratedTextContent).toBe(cleanTextContent);
+
+  // Abort any further expects. All bets are off at this point.
+  throw new BadMarkupExpected();
 };
 
 // runs a DOM rendering test as four different tests, with four different rendering
@@ -148,8 +168,17 @@ function itClientRenders(desc, testFn) {
     testFn(clientCleanRender));
   it(`renders ${desc} with client render on top of good server markup`, () =>
     testFn(clientRenderOnServerString));
-  it(`renders ${desc} with client render on top of bad server markup`, () =>
-    testFn(clientRenderOnBadMarkup));
+  it(`renders ${desc} with client render on top of bad server markup`, async () => {
+    try {
+      await testFn(clientRenderOnBadMarkup);
+    } catch (x) {
+      // We expect this to trigger the BadMarkupExpected rejection.
+      if (!(x instanceof BadMarkupExpected)) {
+        // If not, rethrow.
+        throw x;
+      }
+    }
+  });
 }
 
 function itThrows(desc, testFn) {
@@ -425,7 +454,7 @@ describe('ReactDOMServerIntegration', () => {
 
       itRenders('no dangerouslySetInnerHTML attribute', async render => {
         const e = await render(
-          <div dangerouslySetInnerHTML={{__html: 'foo'}} />,
+          <div dangerouslySetInnerHTML={{__html: '<foo />'}} />,
         );
         expect(e.getAttribute('dangerouslySetInnerHTML')).toBe(null);
       });
diff --git a/src/renderers/shared/fiber/ReactFiberBeginWork.js b/src/renderers/shared/fiber/ReactFiberBeginWork.js
index c042ce8e9263..9af2c9ecb3fe 100644
--- a/src/renderers/shared/fiber/ReactFiberBeginWork.js
+++ b/src/renderers/shared/fiber/ReactFiberBeginWork.js
@@ -66,7 +66,7 @@ if (__DEV__) {
 module.exports = function<T, P, I, TI, PI, C, CX, PL>(
   config: HostConfig<T, P, I, TI, PI, C, CX, PL>,
   hostContext: HostContext<C, CX>,
-  hydrationContext: HydrationContext<I, TI, C>,
+  hydrationContext: HydrationContext<C>,
   scheduleUpdate: (fiber: Fiber, priorityLevel: PriorityLevel) => void,
   getPriorityContext: (fiber: Fiber, forceAsync: boolean) => PriorityLevel,
 ) {
diff --git a/src/renderers/shared/fiber/ReactFiberCommitWork.js b/src/renderers/shared/fiber/ReactFiberCommitWork.js
index 7fe0efad7233..dbd4ae67f768 100644
--- a/src/renderers/shared/fiber/ReactFiberCommitWork.js
+++ b/src/renderers/shared/fiber/ReactFiberCommitWork.js
@@ -392,10 +392,13 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
       }
       case HostComponent: {
         const instance: I = finishedWork.stateNode;
-        if (instance != null && current !== null) {
+        if (instance != null) {
           // Commit the work prepared earlier.
           const newProps = finishedWork.memoizedProps;
-          const oldProps = current.memoizedProps;
+          // For hydration we reuse the update path but we treat the oldProps
+          // as the newProps. The updatePayload will contain the real change in
+          // this case.
+          const oldProps = current !== null ? current.memoizedProps : newProps;
           const type = finishedWork.type;
           // TODO: Type the updateQueue to be specific to host components.
           const updatePayload: null | PL = (finishedWork.updateQueue: any);
@@ -415,13 +418,18 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
       }
       case HostText: {
         invariant(
-          finishedWork.stateNode !== null && current !== null,
-          'This should only be done during updates. This error is likely ' +
+          finishedWork.stateNode !== null,
+          'This should have a text node initialized. This error is likely ' +
             'caused by a bug in React. Please file an issue.',
         );
         const textInstance: TI = finishedWork.stateNode;
         const newText: string = finishedWork.memoizedProps;
-        const oldText: string = current.memoizedProps;
+        // For hydration we reuse the update path but we treat the oldProps
+        // as the newProps. The updatePayload will contain the real change in
+        // this case.
+        const oldText: string = current !== null
+          ? current.memoizedProps
+          : newText;
         commitTextUpdate(textInstance, oldText, newText);
         return;
       }
diff --git a/src/renderers/shared/fiber/ReactFiberCompleteWork.js b/src/renderers/shared/fiber/ReactFiberCompleteWork.js
index 9e95547b48f0..84406e877c40 100644
--- a/src/renderers/shared/fiber/ReactFiberCompleteWork.js
+++ b/src/renderers/shared/fiber/ReactFiberCompleteWork.js
@@ -47,7 +47,7 @@ var invariant = require('fbjs/lib/invariant');
 module.exports = function<T, P, I, TI, PI, C, CX, PL>(
   config: HostConfig<T, P, I, TI, PI, C, CX, PL>,
   hostContext: HostContext<C, CX>,
-  hydrationContext: HydrationContext<I, TI, C>,
+  hydrationContext: HydrationContext<C>,
 ) {
   const {
     createInstance,
@@ -65,8 +65,8 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
   } = hostContext;
 
   const {
-    hydrateHostInstance,
-    hydrateHostTextInstance,
+    prepareToHydrateHostInstance,
+    prepareToHydrateHostTextInstance,
     popHydrationState,
   } = hydrationContext;
 
@@ -275,15 +275,22 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
           // "stack" as the parent. Then append children as we go in beginWork
           // or completeWork depending on we want to add then top->down or
           // bottom->up. Top->down is faster in IE11.
-          let instance;
           let wasHydrated = popHydrationState(workInProgress);
           if (wasHydrated) {
-            instance = hydrateHostInstance(
-              workInProgress,
-              rootContainerInstance,
-            );
+            // TOOD: Move this and createInstance step into the beginPhase
+            // to consolidate.
+            if (
+              prepareToHydrateHostInstance(
+                workInProgress,
+                rootContainerInstance,
+              )
+            ) {
+              // If changes to the hydrated node needs to be applied at the
+              // commit-phase we mark this as such.
+              markUpdate(workInProgress);
+            }
           } else {
-            instance = createInstance(
+            let instance = createInstance(
               type,
               newProps,
               rootContainerInstance,
@@ -306,9 +313,9 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
             ) {
               markUpdate(workInProgress);
             }
+            workInProgress.stateNode = instance;
           }
 
-          workInProgress.stateNode = instance;
           if (workInProgress.ref !== null) {
             // If there is a ref on a host node we need to schedule a callback
             markRef(workInProgress);
@@ -337,19 +344,19 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
           }
           const rootContainerInstance = getRootHostContainer();
           const currentHostContext = getHostContext();
-          let textInstance;
           let wasHydrated = popHydrationState(workInProgress);
           if (wasHydrated) {
-            textInstance = hydrateHostTextInstance(workInProgress);
+            if (prepareToHydrateHostTextInstance(workInProgress)) {
+              markUpdate(workInProgress);
+            }
           } else {
-            textInstance = createTextInstance(
+            workInProgress.stateNode = createTextInstance(
               newText,
               rootContainerInstance,
               currentHostContext,
               workInProgress,
             );
           }
-          workInProgress.stateNode = textInstance;
         }
         return null;
       }
diff --git a/src/renderers/shared/fiber/ReactFiberHydrationContext.js b/src/renderers/shared/fiber/ReactFiberHydrationContext.js
index e3043258dc85..edbcb3151f9d 100644
--- a/src/renderers/shared/fiber/ReactFiberHydrationContext.js
+++ b/src/renderers/shared/fiber/ReactFiberHydrationContext.js
@@ -22,18 +22,18 @@ const {Deletion, Placement} = require('ReactTypeOfSideEffect');
 
 const {createFiberFromHostInstanceForDeletion} = require('ReactFiber');
 
-export type HydrationContext<I, TI, C> = {
+export type HydrationContext<C> = {
   enterHydrationState(fiber: Fiber): boolean,
   resetHydrationState(): void,
   tryToClaimNextHydratableInstance(fiber: Fiber): void,
-  hydrateHostInstance(fiber: Fiber, rootContainerInstance: C): I,
-  hydrateHostTextInstance(fiber: Fiber): TI,
+  prepareToHydrateHostInstance(fiber: Fiber, rootContainerInstance: C): boolean,
+  prepareToHydrateHostTextInstance(fiber: Fiber): boolean,
   popHydrationState(fiber: Fiber): boolean,
 };
 
 module.exports = function<T, P, I, TI, PI, C, CX, PL>(
   config: HostConfig<T, P, I, TI, PI, C, CX, PL>,
-): HydrationContext<I, TI, C> {
+): HydrationContext<C> {
   const {
     shouldSetTextContent,
     canHydrateInstance,
@@ -59,10 +59,10 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
       },
       resetHydrationState() {},
       tryToClaimNextHydratableInstance() {},
-      hydrateHostInstance() {
+      prepareToHydrateHostInstance() {
         invariant(false, 'React bug.');
       },
-      hydrateHostTextInstance() {
+      prepareToHydrateHostTextInstance() {
         invariant(false, 'React bug.');
       },
       popHydrationState(fiber: Fiber) {
@@ -147,22 +147,36 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
     nextHydratableInstance = getFirstHydratableChild(nextInstance);
   }
 
-  function hydrateHostInstance(fiber: Fiber, rootContainerInstance: C): I {
+  function prepareToHydrateHostInstance(
+    fiber: Fiber,
+    rootContainerInstance: C,
+  ): boolean {
     const instance: I = fiber.stateNode;
-    hydrateInstance(
+    const updatePayload = hydrateInstance(
       instance,
       fiber.type,
       fiber.memoizedProps,
       rootContainerInstance,
       fiber,
     );
-    return instance;
+    // TODO: Type this specific to this type of component.
+    fiber.updateQueue = (updatePayload: any);
+    // If the update payload indicates that there is a change or if there
+    // is a new ref we mark this as an update.
+    if (updatePayload !== null) {
+      return true;
+    }
+    return false;
   }
 
-  function hydrateHostTextInstance(fiber: Fiber): TI {
+  function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
     const textInstance: TI = fiber.stateNode;
-    hydrateTextInstance(textInstance, fiber);
-    return textInstance;
+    const shouldUpdate = hydrateTextInstance(
+      textInstance,
+      fiber.memoizedProps,
+      fiber,
+    );
+    return shouldUpdate;
   }
 
   function popToNextHostParent(fiber: Fiber): void {
@@ -229,8 +243,8 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
     enterHydrationState,
     resetHydrationState,
     tryToClaimNextHydratableInstance,
-    hydrateHostInstance,
-    hydrateHostTextInstance,
+    prepareToHydrateHostInstance,
+    prepareToHydrateHostTextInstance,
     popHydrationState,
   };
 };
diff --git a/src/renderers/shared/fiber/ReactFiberReconciler.js b/src/renderers/shared/fiber/ReactFiberReconciler.js
index ab7764944120..1223af54a44b 100644
--- a/src/renderers/shared/fiber/ReactFiberReconciler.js
+++ b/src/renderers/shared/fiber/ReactFiberReconciler.js
@@ -126,11 +126,12 @@ export type HostConfig<T, P, I, TI, PI, C, CX, PL> = {
     props: P,
     rootContainerInstance: C,
     internalInstanceHandle: OpaqueHandle,
-  ) => void,
+  ) => null | PL,
   hydrateTextInstance?: (
     textInstance: TI,
+    text: string,
     internalInstanceHandle: OpaqueHandle,
-  ) => void,
+  ) => boolean,
 
   useSyncScheduling?: boolean,
 };
diff --git a/src/renderers/shared/fiber/ReactFiberScheduler.js b/src/renderers/shared/fiber/ReactFiberScheduler.js
index e010390bc8dd..8b02594eee75 100644
--- a/src/renderers/shared/fiber/ReactFiberScheduler.js
+++ b/src/renderers/shared/fiber/ReactFiberScheduler.js
@@ -146,11 +146,9 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
   config: HostConfig<T, P, I, TI, PI, C, CX, PL>,
 ) {
   const hostContext = ReactFiberHostContext(config);
-  const hydrationContext: HydrationContext<
-    I,
-    TI,
-    C
-  > = ReactFiberHydrationContext(config);
+  const hydrationContext: HydrationContext<C> = ReactFiberHydrationContext(
+    config,
+  );
   const {popHostContainer, popHostContext, resetHostContainer} = hostContext;
   const {beginWork, beginFailedWork} = ReactFiberBeginWork(
     config,

From ae018bfd94d8490fb28ab51e356a80d6357cc8b1 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sema@fb.com>
Date: Tue, 6 Jun 2017 15:09:45 -0700
Subject: [PATCH 2/2] Hydrate text node if possible

Currently we're never matching text nodes so we need to properly branch.
---
 .../ReactDOMServerIntegration-test.js         |  2 +-
 .../fiber/ReactFiberHydrationContext.js       | 36 ++++++++++++-------
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js b/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
index dd9bb11b2a41..fa23ebc06226 100644
--- a/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
+++ b/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
@@ -112,7 +112,7 @@ const clientRenderOnBadMarkup = async (element, errorCount = 0) => {
   // First we render the top of bad mark up.
   var domElement = document.createElement('div');
   domElement.innerHTML =
-    '<div id="badIdWhichWillCauseMismatch" data-reactroot="" data-reactid="1">Foo</div>';
+    '<div id="badIdWhichWillCauseMismatch" data-reactroot="" data-reactid="1"></div>';
   await renderIntoDom(element, domElement, errorCount + 1);
 
   // This gives us the resulting text content.
diff --git a/src/renderers/shared/fiber/ReactFiberHydrationContext.js b/src/renderers/shared/fiber/ReactFiberHydrationContext.js
index edbcb3151f9d..920934fb6b30 100644
--- a/src/renderers/shared/fiber/ReactFiberHydrationContext.js
+++ b/src/renderers/shared/fiber/ReactFiberHydrationContext.js
@@ -17,7 +17,7 @@ import type {HostConfig} from 'ReactFiberReconciler';
 
 var invariant = require('fbjs/lib/invariant');
 
-const {HostComponent, HostRoot} = require('ReactTypeOfWork');
+const {HostComponent, HostText, HostRoot} = require('ReactTypeOfWork');
 const {Deletion, Placement} = require('ReactTypeOfSideEffect');
 
 const {createFiberFromHostInstanceForDeletion} = require('ReactFiber');
@@ -89,16 +89,13 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
     const childToDelete = createFiberFromHostInstanceForDeletion();
     childToDelete.stateNode = instance;
     childToDelete.return = returnFiber;
-    // Deletions are added in reversed order so we add it to the front.
-    const last = returnFiber.progressedLastDeletion;
-    if (last !== null) {
-      last.nextEffect = childToDelete;
-      returnFiber.progressedLastDeletion = childToDelete;
-    } else {
-      returnFiber.progressedFirstDeletion = returnFiber.progressedLastDeletion = childToDelete;
-    }
     childToDelete.effectTag = Deletion;
 
+    // This might seem like it belongs on progressedFirstDeletion. However,
+    // these children are not part of the reconciliation list of children.
+    // Even if we abort and rereconcile the children, that will try to hydrate
+    // again and the nodes are still in the host tree so these will be
+    // recreated.
     if (returnFiber.lastEffect !== null) {
       returnFiber.lastEffect.nextEffect = childToDelete;
       returnFiber.lastEffect = childToDelete;
@@ -107,6 +104,21 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
     }
   }
 
+  function canHydrate(fiber, nextInstance) {
+    switch (fiber.tag) {
+      case HostComponent: {
+        const type = fiber.type;
+        const props = fiber.memoizedProps;
+        return canHydrateInstance(nextInstance, type, props);
+      }
+      case HostText: {
+        return canHydrateTextInstance(nextInstance);
+      }
+      default:
+        return false;
+    }
+  }
+
   function tryToClaimNextHydratableInstance(fiber: Fiber) {
     if (!isHydrating) {
       return;
@@ -119,14 +131,12 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
       hydrationParentFiber = fiber;
       return;
     }
-    const type = fiber.type;
-    const props = fiber.memoizedProps;
-    if (!canHydrateInstance(nextInstance, type, props)) {
+    if (!canHydrate(fiber, nextInstance)) {
       // If we can't hydrate this instance let's try the next one.
       // We use this as a heuristic. It's based on intuition and not data so it
       // might be flawed or unnecessary.
       nextInstance = getNextHydratableSibling(nextInstance);
-      if (!nextInstance || !canHydrateInstance(nextInstance, type, props)) {
+      if (!nextInstance || !canHydrate(fiber, nextInstance)) {
         // Nothing to hydrate. Make it an insertion.
         fiber.effectTag |= Placement;
         isHydrating = false;