Ignore SSR warning using explicit suppressHydrationWarning option (#1…

…1126)

* Pass parent type and props to insert/delete hydration warning hooks

For this to work, we need to split the API into a container and normal
version. Since the root doesn't have a type nor props.

* Ignore SSR warning using explicit suppressHydrationWarning option

This lets you ignore the warning on a single element and its direct child
content. This is useful for simple fields that you're expecting to fail
such as time stamps.

Note that this still won't patch up such content so it'll remain
inconsistent. It's also not suitable for nested complex content that may
change.

* Suppress warning of inserted/deleted direct children

* Add fixture testing hydration warning

Also fixing the render->hydrate API change in the fixture

* Add hooks when text hydration doesn't match up

The purpose of these hooks is to pass the parent context to them. I don't
want to do that in the normal hydrateTextInstance hooks since this is
only used in DEV. This is also in line with what happens if there is no
text instance at all and we invoke didNotFindHydratableTextInstance.

* Move mismatch text hydration warning to the new hooks

This lets us ignore this call when we have parent props available and
the suppression flag is set.

fixtures/ssr/src/components/Page.js

@@ -15,6 +15,9 @@ export default class Page extends Component {
     );
     return (
       <div>
+        <p suppressHydrationWarning={true}>
+          A random number: {Math.random()}
+        </p>
         <p>
           {!this.state.active ? link : 'Thanks!'}
         </p>

fixtures/ssr/src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import {render} from 'react-dom';
+import {hydrate} from 'react-dom';
 
 import App from './components/App';
 
-render(<App assets={window.assetManifest} />, document);
+hydrate(<App assets={window.assetManifest} />, document);

src/renderers/dom/fiber/ReactDOMFiberComponent.js

@@ -53,6 +53,7 @@ var registrationNameModules = EventPluginRegistry.registrationNameModules;
 
 var DANGEROUSLY_SET_INNER_HTML = 'dangerouslySetInnerHTML';
 var SUPPRESS_CONTENT_EDITABLE_WARNING = 'suppressContentEditableWarning';
+var SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning';
 var CHILDREN = 'children';
 var STYLE = 'style';
 var HTML = '__html';
@@ -273,7 +274,10 @@ function setInitialDOMProperties(
       } else if (typeof nextProp === 'number') {
         setTextContent(domElement, '' + nextProp);
       }
-    } else if (propKey === SUPPRESS_CONTENT_EDITABLE_WARNING) {
+    } else if (
+      propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||
+      propKey === SUPPRESS_HYDRATION_WARNING
+    ) {
       // Noop
     } else if (registrationNameModules.hasOwnProperty(propKey)) {
       if (nextProp != null) {
@@ -664,7 +668,10 @@ var ReactDOMFiberComponent = {
         propKey === CHILDREN
       ) {
         // Noop. This is handled by the clear text mechanism.
-      } else if (propKey === SUPPRESS_CONTENT_EDITABLE_WARNING) {
+      } else if (
+        propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||
+        propKey === SUPPRESS_HYDRATION_WARNING
+      ) {
         // Noop
       } else if (registrationNameModules.hasOwnProperty(propKey)) {
         // This is a special case. If any listener updates we need to ensure
@@ -750,7 +757,10 @@ var ReactDOMFiberComponent = {
         ) {
           (updatePayload = updatePayload || []).push(propKey, '' + nextProp);
         }
-      } else if (propKey === SUPPRESS_CONTENT_EDITABLE_WARNING) {
+      } else if (
+        propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||
+        propKey === SUPPRESS_HYDRATION_WARNING
+      ) {
         // Noop
       } else if (registrationNameModules.hasOwnProperty(propKey)) {
         if (nextProp != null) {
@@ -828,6 +838,8 @@ var ReactDOMFiberComponent = {
     rootContainerElement: Element | Document,
   ): null | Array<mixed> {
     if (__DEV__) {
+      var suppressHydrationWarning =
+        rawProps[SUPPRESS_HYDRATION_WARNING] === true;
       var isCustomComponentTag = isCustomComponent(tag, rawProps);
       validatePropertiesInDevelopment(tag, rawProps);
       if (isCustomComponentTag && !didWarnShadyDOM && domElement.shadyRoot) {
@@ -986,14 +998,14 @@ var ReactDOMFiberComponent = {
         // TODO: Should we use domElement.firstChild.nodeValue to compare?
         if (typeof nextProp === 'string') {
           if (domElement.textContent !== nextProp) {
-            if (__DEV__) {
+            if (__DEV__ && !suppressHydrationWarning) {
               warnForTextDifference(domElement.textContent, nextProp);
             }
             updatePayload = [CHILDREN, nextProp];
           }
         } else if (typeof nextProp === 'number') {
           if (domElement.textContent !== '' + nextProp) {
-            if (__DEV__) {
+            if (__DEV__ && !suppressHydrationWarning) {
               warnForTextDifference(domElement.textContent, nextProp);
             }
             updatePayload = [CHILDREN, '' + nextProp];
@@ -1010,8 +1022,11 @@ var ReactDOMFiberComponent = {
         // Validate that the properties correspond to their expected values.
         var serverValue;
         var propertyInfo;
-        if (
+        if (suppressHydrationWarning) {
+          // Don't bother comparing. We're ignoring all these warnings.
+        } else if (
           propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||
+          propKey === SUPPRESS_HYDRATION_WARNING ||
           // Controlled attributes are not validated
           // TODO: Only ignore them on controlled tags.
           propKey === 'value' ||
@@ -1085,7 +1100,7 @@ var ReactDOMFiberComponent = {
 
     if (__DEV__) {
       // $FlowFixMe - Should be inferred as not undefined.
-      if (extraAttributeNames.size > 0) {
+      if (extraAttributeNames.size > 0 && !suppressHydrationWarning) {
         // $FlowFixMe - Should be inferred as not undefined.
         warnForExtraAttributes(extraAttributeNames);
       }
@@ -1125,12 +1140,13 @@ var ReactDOMFiberComponent = {
 
   diffHydratedText(textNode: Text, text: string): boolean {
     const isDifferent = textNode.nodeValue !== text;
+    return isDifferent;
+  },
+
+  warnForUnmatchedText(textNode: Text, text: string) {
     if (__DEV__) {
-      if (isDifferent) {
-        warnForTextDifference(textNode.nodeValue, text);
-      }
+      warnForTextDifference(textNode.nodeValue, text);
     }
-    return isDifferent;
   },
 
   warnForDeletedHydratableElement(

src/renderers/dom/fiber/ReactDOMFiberEntry.js

@@ -50,6 +50,7 @@ var {
   updateProperties,
   diffHydratedProperties,
   diffHydratedText,
+  warnForUnmatchedText,
   warnForDeletedHydratableElement,
   warnForDeletedHydratableText,
   warnForInsertedHydratedElement,
@@ -58,6 +59,7 @@ var {
 var {precacheFiberNode, updateFiberProps} = ReactDOMComponentTree;
 
 if (__DEV__) {
+  var SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning';
   var lowPriorityWarning = require('lowPriorityWarning');
   var warning = require('fbjs/lib/warning');
   var validateDOMNesting = require('validateDOMNesting');
@@ -99,6 +101,7 @@ type Props = {
   autoFocus?: boolean,
   children?: mixed,
   hidden?: boolean,
+  suppressHydrationWarning?: boolean,
 };
 type Instance = Element;
 type TextInstance = Text;
@@ -523,30 +526,96 @@ var DOMRenderer = ReactFiberReconciler({
     return diffHydratedText(textInstance, text);
   },
 
+  didNotMatchHydratedContainerTextInstance(
+    parentContainer: Container,
+    textInstance: TextInstance,
+    text: string,
+  ) {
+    if (__DEV__) {
+      warnForUnmatchedText(textInstance, text);
+    }
+  },
+
+  didNotMatchHydratedTextInstance(
+    parentType: string,
+    parentProps: Props,
+    parentInstance: Instance,
+    textInstance: TextInstance,
+    text: string,
+  ) {
+    if (__DEV__ && parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
+      warnForUnmatchedText(textInstance, text);
+    }
+  },
+
+  didNotHydrateContainerInstance(
+    parentContainer: Container,
+    instance: Instance | TextInstance,
+  ) {
+    if (__DEV__) {
+      if (instance.nodeType === 1) {
+        warnForDeletedHydratableElement(parentContainer, (instance: any));
+      } else {
+        warnForDeletedHydratableText(parentContainer, (instance: any));
+      }
+    }
+  },
+
   didNotHydrateInstance(
-    parentInstance: Instance | Container,
+    parentType: string,
+    parentProps: Props,
+    parentInstance: Instance,
     instance: Instance | TextInstance,
   ) {
-    if (instance.nodeType === 1) {
-      warnForDeletedHydratableElement(parentInstance, (instance: any));
-    } else {
-      warnForDeletedHydratableText(parentInstance, (instance: any));
+    if (__DEV__ && parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
+      if (instance.nodeType === 1) {
+        warnForDeletedHydratableElement(parentInstance, (instance: any));
+      } else {
+        warnForDeletedHydratableText(parentInstance, (instance: any));
+      }
+    }
+  },
+
+  didNotFindHydratableContainerInstance(
+    parentContainer: Container,
+    type: string,
+    props: Props,
+  ) {
+    if (__DEV__) {
+      warnForInsertedHydratedElement(parentContainer, type, props);
+    }
+  },
+
+  didNotFindHydratableContainerTextInstance(
+    parentContainer: Container,
+    text: string,
+  ) {
+    if (__DEV__) {
+      warnForInsertedHydratedText(parentContainer, text);
     }
   },
 
   didNotFindHydratableInstance(
-    parentInstance: Instance | Container,
+    parentType: string,
+    parentProps: Props,
+    parentInstance: Instance,
     type: string,
     props: Props,
   ) {
-    warnForInsertedHydratedElement(parentInstance, type, props);
+    if (__DEV__ && parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
+      warnForInsertedHydratedElement(parentInstance, type, props);
+    }
   },
 
   didNotFindHydratableTextInstance(
-    parentInstance: Instance | Container,
+    parentType: string,
+    parentProps: Props,
+    parentInstance: Instance,
     text: string,
   ) {
-    warnForInsertedHydratedText(parentInstance, text);
+    if (__DEV__ && parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
+      warnForInsertedHydratedText(parentInstance, text);
+    }
   },
 
   scheduleDeferredCallback: ReactDOMFrameScheduling.rIC,

src/renderers/dom/shared/DOMProperty.js

@@ -21,6 +21,7 @@ var RESERVED_PROPS = {
   defaultChecked: true,
   innerHTML: true,
   suppressContentEditableWarning: true,
+  suppressHydrationWarning: true,
   style: true,
 };
 

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

@@ -318,25 +318,33 @@ describe('ReactDOMComponent', () => {
         <my-component
           children={['foo']}
           suppressContentEditableWarning={true}
+          suppressHydrationWarning={true}
         />,
         container,
       );
       expect(container.firstChild.hasAttribute('children')).toBe(false);
       expect(
         container.firstChild.hasAttribute('suppressContentEditableWarning'),
       ).toBe(false);
+      expect(
+        container.firstChild.hasAttribute('suppressHydrationWarning'),
+      ).toBe(false);
 
       ReactDOM.render(
         <my-component
           children={['bar']}
           suppressContentEditableWarning={false}
+          suppressHydrationWarning={false}
         />,
         container,
       );
       expect(container.firstChild.hasAttribute('children')).toBe(false);
       expect(
         container.firstChild.hasAttribute('suppressContentEditableWarning'),
       ).toBe(false);
+      expect(
+        container.firstChild.hasAttribute('suppressHydrationWarning'),
+      ).toBe(false);
     });
 
     it('should skip dangerouslySetInnerHTML on web components', () => {