Ignore SSR warning using explicit suppressHydrationWarning option

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', () => {