diff --git a/package.json b/package.json index 86cff63303..01f0a2781f 100644 --- a/package.json +++ b/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", diff --git a/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.internal.js b/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.internal.js index 5b1b1732a1..651463bf1c 100644 --- a/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.internal.js +++ b/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.internal.js @@ -63,28 +63,9 @@ describe('ReactComponentLifeCycle', () => { }); describe('react-lifecycles-compat', () => { - const polyfill = require('react-lifecycles-compat'); - - it('should not warn about deprecated cWM/cWRP for polyfilled components', () => { - class PolyfilledComponent extends React.Component { - state = {}; - static getDerivedStateFromProps() { - return null; - } - render() { - return null; - } - } - - polyfill(PolyfilledComponent); - - const container = document.createElement('div'); - ReactDOM.render(, container); - }); - - it('should not warn about unsafe lifecycles within "strict" tree for polyfilled components', () => { - const {StrictMode} = React; + const {polyfill} = require('react-lifecycles-compat'); + it('should not warn for components with polyfilled getDerivedStateFromProps', () => { class PolyfilledComponent extends React.Component { state = {}; static getDerivedStateFromProps() { @@ -99,9 +80,31 @@ describe('ReactComponentLifeCycle', () => { const container = document.createElement('div'); ReactDOM.render( - + - , + , + 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'); + ReactDOM.render( + + + , container, ); }); diff --git a/packages/react-dom/src/__tests__/ReactDOMServerLifecycles-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerLifecycles-test.internal.js index 69bedb3de1..bbd502e2ab 100644 --- a/packages/react-dom/src/__tests__/ReactDOMServerLifecycles-test.internal.js +++ b/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(); + const container = document.createElement('div'); + ReactDOMServer.renderToString( + + + , + 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( + + + , + container, + ); }); }); }); diff --git a/packages/react-reconciler/src/ReactStrictModeWarnings.js b/packages/react-reconciler/src/ReactStrictModeWarnings.js index 9b7b6c1dd2..0f39b09371 100644 --- a/packages/react-reconciler/src/ReactStrictModeWarnings.js +++ b/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'); diff --git a/yarn.lock b/yarn.lock index 495fa024f6..0c9feb48b6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4434,9 +4434,9 @@ react-dom@15.5.4: 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" react@15.5.4: version "15.5.4"