StrictMode should not warn about polyfilled getSnapshotBeforeUpdate (facebook#12647)

* Installed 3.x release of react-lifecycles-compat
* Updated ReactComponentLifeCycle-test and ReactDOMServerLifecycles-test to cover both polyfilled lifecycles in StrictMode
* Updated StrictMode warnings to not warn about polyfilled getSnapshotBeforeUpdate

Author: bvaughn

package.json

@@ -82,7 +82,7 @@
     "prettier": "1.11.1",
     "prop-types": "^15.6.0",
     "random-seed": "^0.3.0",
-    "react-lifecycles-compat": "^1.0.2",
+    "react-lifecycles-compat": "^3.0.2",
     "rimraf": "^2.6.1",
     "rollup": "^0.52.1",
     "rollup-plugin-babel": "^3.0.1",

packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.internal.js

@@ -63,9 +63,9 @@ describe('ReactComponentLifeCycle', () => {
   });
 
   describe('react-lifecycles-compat', () => {
-    const polyfill = require('react-lifecycles-compat');
+    const {polyfill} = require('react-lifecycles-compat');
 
-    it('should not warn about deprecated cWM/cWRP for polyfilled components', () => {
+    it('should not warn for components with polyfilled getDerivedStateFromProps', () => {
       class PolyfilledComponent extends React.Component {
         state = {};
         static getDerivedStateFromProps() {
@@ -79,17 +79,20 @@ describe('ReactComponentLifeCycle', () => {
       polyfill(PolyfilledComponent);
 
       const container = document.createElement('div');
-      ReactDOM.render(<PolyfilledComponent />, container);
+      ReactDOM.render(
+        <React.StrictMode>
+          <PolyfilledComponent />
+        </React.StrictMode>,
+        container,
+      );
     });
 
-    it('should not warn about unsafe lifecycles within "strict" tree for polyfilled components', () => {
-      const {StrictMode} = React;
-
+    it('should not warn for components with polyfilled getSnapshotBeforeUpdate', () => {
       class PolyfilledComponent extends React.Component {
-        state = {};
-        static getDerivedStateFromProps() {
+        getSnapshotBeforeUpdate() {
           return null;
         }
+        componentDidUpdate() {}
         render() {
           return null;
         }
@@ -99,9 +102,9 @@ describe('ReactComponentLifeCycle', () => {
 
       const container = document.createElement('div');
       ReactDOM.render(
-        <StrictMode>
+        <React.StrictMode>
           <PolyfilledComponent />
-        </StrictMode>,
+        </React.StrictMode>,
         container,
       );
     });

packages/react-dom/src/__tests__/ReactDOMServerLifecycles-test.internal.js

@@ -69,9 +69,9 @@ describe('ReactDOMServerLifecycles', () => {
   });
 
   describe('react-lifecycles-compat', () => {
-    const polyfill = require('react-lifecycles-compat');
+    const {polyfill} = require('react-lifecycles-compat');
 
-    it('should not warn about deprecated cWM/cWRP for polyfilled components', () => {
+    it('should not warn for components with polyfilled getDerivedStateFromProps', () => {
       class PolyfilledComponent extends React.Component {
         state = {};
         static getDerivedStateFromProps() {
@@ -84,7 +84,35 @@ describe('ReactDOMServerLifecycles', () => {
 
       polyfill(PolyfilledComponent);
 
-      ReactDOMServer.renderToString(<PolyfilledComponent />);
+      const container = document.createElement('div');
+      ReactDOMServer.renderToString(
+        <React.StrictMode>
+          <PolyfilledComponent />
+        </React.StrictMode>,
+        container,
+      );
+    });
+
+    it('should not warn for components with polyfilled getSnapshotBeforeUpdate', () => {
+      class PolyfilledComponent extends React.Component {
+        getSnapshotBeforeUpdate() {
+          return null;
+        }
+        componentDidUpdate() {}
+        render() {
+          return null;
+        }
+      }
+
+      polyfill(PolyfilledComponent);
+
+      const container = document.createElement('div');
+      ReactDOMServer.renderToString(
+        <React.StrictMode>
+          <PolyfilledComponent />
+        </React.StrictMode>,
+        container,
+      );
     });
   });
 });

packages/react-reconciler/src/ReactStrictModeWarnings.js

@@ -236,16 +236,6 @@ if (__DEV__) {
       return;
     }
 
-    // Don't warn about react-lifecycles-compat polyfilled components.
-    // Note that it is sufficient to check for the presence of a
-    // single lifecycle, componentWillMount, with the polyfill flag.
-    if (
-      typeof instance.componentWillMount === 'function' &&
-      instance.componentWillMount.__suppressDeprecationWarning === true
-    ) {
-      return;
-    }
-
     let warningsForRoot;
     if (!pendingUnsafeLifecycleWarnings.has(strictRoot)) {
       warningsForRoot = {
@@ -261,19 +251,23 @@ if (__DEV__) {
 
     const unsafeLifecycles = [];
     if (
-      typeof instance.componentWillMount === 'function' ||
+      (typeof instance.componentWillMount === 'function' &&
+        instance.componentWillMount.__suppressDeprecationWarning !== true) ||
       typeof instance.UNSAFE_componentWillMount === 'function'
     ) {
       unsafeLifecycles.push('UNSAFE_componentWillMount');
     }
     if (
-      typeof instance.componentWillReceiveProps === 'function' ||
+      (typeof instance.componentWillReceiveProps === 'function' &&
+        instance.componentWillReceiveProps.__suppressDeprecationWarning !==
+          true) ||
       typeof instance.UNSAFE_componentWillReceiveProps === 'function'
     ) {
       unsafeLifecycles.push('UNSAFE_componentWillReceiveProps');
     }
     if (
-      typeof instance.componentWillUpdate === 'function' ||
+      (typeof instance.componentWillUpdate === 'function' &&
+        instance.componentWillUpdate.__suppressDeprecationWarning !== true) ||
       typeof instance.UNSAFE_componentWillUpdate === 'function'
     ) {
       unsafeLifecycles.push('UNSAFE_componentWillUpdate');

yarn.lock

@@ -4434,9 +4434,9 @@ [email protected]:
     object-assign "^4.1.0"
     prop-types "~15.5.7"
 
-react-lifecycles-compat@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-1.0.2.tgz#551d8b1d156346e5fcf30ffac9b32ce3f78b8850"
+react-lifecycles-compat@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.2.tgz#7279047275bd727a912e25f734c0559527e84eff"
 
 [email protected]:
   version "15.5.4"