Check document.documentMode once

gaearon · gaearon · commit d6b59e3d2641 · 2018-09-04T14:27:21.000+01:00
diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration.js
@@ -283,6 +283,10 @@ describe('ReactDOMServerHydration', () => {
 
   it('should not warn when the style property differs on whitespace or order in IE', () => {
     document.documentMode = 11;
+    jest.resetModules();
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMServer = require('react-dom/server');
     try {
       const element = document.createElement('div');
 
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -67,6 +67,7 @@ let warnForTextDifference;
 let warnForPropDifference;
 let warnForExtraAttributes;
 let warnForInvalidEventListener;
+let canDiffStyleForHydrationWarning;
 
 let normalizeMarkupForTextOrAttribute;
 let normalizeHTML;
@@ -94,6 +95,16 @@ if (__DEV__) {
     validateUnknownProperties(type, props, /* canUseEventSystem */ true);
   };
 
+  // IE 11 parses & normalizes the style attribute as opposed to other
+  // browsers. It adds spaces and sorts the properties in some
+  // non-alphabetical order. Handling that would require sorting CSS
+  // properties in the client & server versions or applying
+  // `expectedStyle` to a temporary DOM node to read its `style` attribute
+  // normalized. Since it only affects IE, we're skipping style warnings
+  // in that browser completely in favor of doing all that work.
+  // See https://github.com/facebook/react/issues/11807
+  canDiffStyleForHydrationWarning = !document.documentMode;
+
   // HTML parsing normalizes CR and CRLF to LF.
   // It also can turn \u0000 into \uFFFD inside attributes.
   // https://www.w3.org/TR/html5/single-page.html#preprocessing-the-input-stream
@@ -1000,15 +1011,7 @@ export function diffHydratedProperties(
         // $FlowFixMe - Should be inferred as not undefined.
         extraAttributeNames.delete(propKey);
 
-        // IE 11 parses & normalizes the style attribute as opposed to other
-        // browsers. It adds spaces and sorts the properties in some
-        // non-alphabetical order. Handling that would require sorting CSS
-        // properties in the client & server versions or applying
-        // `expectedStyle` to a temporary DOM node to read its `style` attribute
-        // normalized. Since it only affects IE, we're skipping style warnings
-        // in that browser completely in favor of doing all that work.
-        // See https://github.com/facebook/react/issues/11807
-        if (!document.documentMode) {
+        if (canDiffStyleForHydrationWarning) {
           const expectedStyle = CSSPropertyOperations.createDangerousStringForStyles(
             nextProp,
           );
