{"files":[{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.internal.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMServerLifecycles-test.internal.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMServerLifecycles-test.js"},{"status":"M","path":"packages\/react-dom\/src\/server\/ReactPartialRenderer.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberClassComponent.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactStrictModeWarnings.js"},{"status":"M","path":"packages\/react-test-renderer\/src\/ReactShallowRenderer.js"},{"status":"M","path":"packages\/react-test-renderer\/src\/__tests__\/ReactShallowRenderer-test.internal.js"},{"status":"M","path":"packages\/react-test-renderer\/src\/__tests__\/ReactShallowRenderer-test.js"},{"status":"M","path":"packages\/react\/src\/__tests__\/ReactStrictMode-test.internal.js"},{"status":"M","path":"packages\/react\/src\/__tests__\/createReactClassIntegration-test.js"}],"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.internal.js\nindex aa7fbf73c1..aa9be8e8d4 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.internal.js\n@@ -24,6 +24,10 @@ describe('ReactComponentLifeCycle', () => {\n ReactDOM = require('react-dom');\n });\n \n+ afterEach(() => {\n+ jest.resetModules();\n+ });\n+\n \/\/ TODO (RFC #6) Merge this back into ReactComponentLifeCycles-test once\n \/\/ the 'warnAboutDeprecatedLifecycles' feature flag has been removed.\n it('warns about deprecated unsafe lifecycles', function() {\n@@ -55,4 +59,55 @@ describe('ReactComponentLifeCycle', () => {\n ReactDOM.render(, container);\n ReactDOM.render(, container);\n });\n+\n+ describe('react-lifecycles-compat', () => {\n+ \/\/ TODO Replace this with react-lifecycles-compat once it's been published\n+ function polyfill(Component) {\n+ Component.prototype.componentWillMount = function() {};\n+ Component.prototype.componentWillMount.__suppressDeprecationWarning = true;\n+ Component.prototype.componentWillReceiveProps = function() {};\n+ Component.prototype.componentWillReceiveProps.__suppressDeprecationWarning = true;\n+ }\n+\n+ it('should not warn about deprecated cWM\/cWRP for polyfilled components', () => {\n+ class PolyfilledComponent extends React.Component {\n+ state = {};\n+ static getDerivedStateFromProps() {\n+ return null;\n+ }\n+ render() {\n+ return null;\n+ }\n+ }\n+\n+ polyfill(PolyfilledComponent);\n+\n+ const container = document.createElement('div');\n+ ReactDOM.render(, container);\n+ });\n+\n+ it('should not warn about unsafe lifecycles within \"strict\" tree for polyfilled components', () => {\n+ const {StrictMode} = React;\n+\n+ class PolyfilledComponent extends React.Component {\n+ state = {};\n+ static getDerivedStateFromProps() {\n+ return null;\n+ }\n+ render() {\n+ return null;\n+ }\n+ }\n+\n+ polyfill(PolyfilledComponent);\n+\n+ const container = document.createElement('div');\n+ ReactDOM.render(\n+ \n+ \n+ <\/StrictMode>,\n+ container,\n+ );\n+ });\n+ });\n });\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.js b\/packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.js\nindex 81591d82fb..b8f5300049 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.js\n@@ -499,7 +499,7 @@ describe('ReactComponentLifeCycle', () => {\n expect(instance.state.stateField).toBe('goodbye');\n });\n \n- it('should call nested lifecycle methods in the right order', () => {\n+ it('should call nested legacy lifecycle methods in the right order', () => {\n let log;\n const logger = function(msg) {\n return function() {\n@@ -509,11 +509,6 @@ describe('ReactComponentLifeCycle', () => {\n };\n };\n class Outer extends React.Component {\n- state = {};\n- static getDerivedStateFromProps(props, prevState) {\n- log.push('outer getDerivedStateFromProps');\n- return null;\n- }\n UNSAFE_componentWillMount = logger('outer componentWillMount');\n componentDidMount = logger('outer componentDidMount');\n UNSAFE_componentWillReceiveProps = logger(\n@@ -533,11 +528,6 @@ describe('ReactComponentLifeCycle', () => {\n }\n \n class Inner extends React.Component {\n- state = {};\n- static getDerivedStateFromProps(props, prevState) {\n- log.push('inner getDerivedStateFromProps');\n- return null;\n- }\n UNSAFE_componentWillMount = logger('inner componentWillMount');\n componentDidMount = logger('inner componentDidMount');\n UNSAFE_componentWillReceiveProps = logger(\n@@ -554,18 +544,9 @@ describe('ReactComponentLifeCycle', () => {\n \n const container = document.createElement('div');\n log = [];\n- expect(() => ReactDOM.render(, container)).toWarnDev([\n- 'Warning: Outer: Defines both componentWillReceiveProps() and static ' +\n- 'getDerivedStateFromProps() methods. ' +\n- 'We recommend using only getDerivedStateFromProps().',\n- 'Warning: Inner: Defines both componentWillReceiveProps() and static ' +\n- 'getDerivedStateFromProps() methods. ' +\n- 'We recommend using only getDerivedStateFromProps().',\n- ]);\n+ ReactDOM.render(, container);\n expect(log).toEqual([\n- 'outer getDerivedStateFromProps',\n 'outer componentWillMount',\n- 'inner getDerivedStateFromProps',\n 'inner componentWillMount',\n 'inner componentDidMount',\n 'outer componentDidMount',\n@@ -576,11 +557,9 @@ describe('ReactComponentLifeCycle', () => {\n ReactDOM.render(, container);\n expect(log).toEqual([\n 'outer componentWillReceiveProps',\n- 'outer getDerivedStateFromProps',\n 'outer shouldComponentUpdate',\n 'outer componentWillUpdate',\n 'inner componentWillReceiveProps',\n- 'inner getDerivedStateFromProps',\n 'inner shouldComponentUpdate',\n 'inner componentWillUpdate',\n 'inner componentDidUpdate',\n@@ -595,6 +574,131 @@ describe('ReactComponentLifeCycle', () => {\n ]);\n });\n \n+ it('should call nested new lifecycle methods in the right order', () => {\n+ let log;\n+ const logger = function(msg) {\n+ return function() {\n+ \/\/ return true for shouldComponentUpdate\n+ log.push(msg);\n+ return true;\n+ };\n+ };\n+ class Outer extends React.Component {\n+ state = {};\n+ static getDerivedStateFromProps(props, prevState) {\n+ log.push('outer getDerivedStateFromProps');\n+ return null;\n+ }\n+ componentDidMount = logger('outer componentDidMount');\n+ shouldComponentUpdate = logger('outer shouldComponentUpdate');\n+ componentDidUpdate = logger('outer componentDidUpdate');\n+ componentWillUnmount = logger('outer componentWillUnmount');\n+ render() {\n+ return (\n+

\n+ \n+ <\/div>\n+ );\n+ }\n+ }\n+\n+ class Inner extends React.Component {\n+ state = {};\n+ static getDerivedStateFromProps(props, prevState) {\n+ log.push('inner getDerivedStateFromProps');\n+ return null;\n+ }\n+ componentDidMount = logger('inner componentDidMount');\n+ shouldComponentUpdate = logger('inner shouldComponentUpdate');\n+ componentDidUpdate = logger('inner componentDidUpdate');\n+ componentWillUnmount = logger('inner componentWillUnmount');\n+ render() {\n+ return {this.props.x}<\/span>;\n+ }\n+ }\n+\n+ const container = document.createElement('div');\n+ log = [];\n+ ReactDOM.render(, container);\n+ expect(log).toEqual([\n+ 'outer getDerivedStateFromProps',\n+ 'inner getDerivedStateFromProps',\n+ 'inner componentDidMount',\n+ 'outer componentDidMount',\n+ ]);\n+\n+ \/\/ Dedup warnings\n+ log = [];\n+ ReactDOM.render(, container);\n+ expect(log).toEqual([\n+ 'outer getDerivedStateFromProps',\n+ 'outer shouldComponentUpdate',\n+ 'inner getDerivedStateFromProps',\n+ 'inner shouldComponentUpdate',\n+ 'inner componentDidUpdate',\n+ 'outer componentDidUpdate',\n+ ]);\n+\n+ log = [];\n+ ReactDOM.unmountComponentAtNode(container);\n+ expect(log).toEqual([\n+ 'outer componentWillUnmount',\n+ 'inner componentWillUnmount',\n+ ]);\n+ });\n+\n+ it('should not invoke deprecated lifecycles (cWM\/cWRP\/cWU) if new static gDSFP is present', () => {\n+ class Component extends React.Component {\n+ state = {};\n+ static getDerivedStateFromProps() {\n+ return null;\n+ }\n+ componentWillMount() {\n+ throw Error('unexpected');\n+ }\n+ componentWillReceiveProps() {\n+ throw Error('unexpected');\n+ }\n+ componentWillUpdate() {\n+ throw Error('unexpected');\n+ }\n+ render() {\n+ return null;\n+ }\n+ }\n+\n+ const container = document.createElement('div');\n+ expect(() => ReactDOM.render(, container)).toWarnDev(\n+ 'Defines both componentWillReceiveProps',\n+ );\n+ });\n+\n+ it('should not invoke new unsafe lifecycles (cWM\/cWRP\/cWU) if static gDSFP is present', () => {\n+ class Component extends React.Component {\n+ state = {};\n+ static getDerivedStateFromProps() {\n+ return null;\n+ }\n+ UNSAFE_componentWillMount() {\n+ throw Error('unexpected');\n+ }\n+ UNSAFE_componentWillReceiveProps() {\n+ throw Error('unexpected');\n+ }\n+ UNSAFE_componentWillUpdate() {\n+ throw Error('unexpected');\n+ }\n+ render() {\n+ return null;\n+ }\n+ }\n+\n+ const container = document.createElement('div');\n+ expect(() => ReactDOM.render(, container)).toWarnDev(\n+ 'Defines both componentWillReceiveProps',\n+ );\n+ });\n+\n it('calls effects on module-pattern component', function() {\n const log = [];\n \ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerLifecycles-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerLifecycles-test.internal.js\nindex 5dd25cc4f7..5f6e9e10c1 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerLifecycles-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerLifecycles-test.internal.js\n@@ -22,6 +22,29 @@ describe('ReactDOMServerLifecycles', () => {\n ReactDOMServer = require('react-dom\/server');\n });\n \n+ afterEach(() => {\n+ jest.resetModules();\n+ });\n+\n+ it('should not invoke cWM if static gDSFP is present', () => {\n+ class Component extends React.Component {\n+ state = {};\n+ static getDerivedStateFromProps() {\n+ return null;\n+ }\n+ componentWillMount() {\n+ throw Error('unexpected');\n+ }\n+ render() {\n+ return null;\n+ }\n+ }\n+\n+ expect(() => ReactDOMServer.renderToString()).toWarnDev(\n+ 'Component: componentWillMount() is deprecated and will be removed in the next major version.',\n+ );\n+ });\n+\n \/\/ TODO (RFC #6) Merge this back into ReactDOMServerLifecycles-test once\n \/\/ the 'warnAboutDeprecatedLifecycles' feature flag has been removed.\n it('should warn about deprecated lifecycle hooks', () => {\n@@ -40,4 +63,30 @@ describe('ReactDOMServerLifecycles', () => {\n \/\/ De-duped\n ReactDOMServer.renderToString();\n });\n+\n+ describe('react-lifecycles-compat', () => {\n+ \/\/ TODO Replace this with react-lifecycles-compat once it's been published\n+ function polyfill(Component) {\n+ Component.prototype.componentWillMount = function() {};\n+ Component.prototype.componentWillMount.__suppressDeprecationWarning = true;\n+ Component.prototype.componentWillReceiveProps = function() {};\n+ Component.prototype.componentWillReceiveProps.__suppressDeprecationWarning = true;\n+ }\n+\n+ it('should not warn about deprecated cWM\/cWRP for polyfilled components', () => {\n+ class PolyfilledComponent extends React.Component {\n+ state = {};\n+ static getDerivedStateFromProps() {\n+ return null;\n+ }\n+ render() {\n+ return null;\n+ }\n+ }\n+\n+ polyfill(PolyfilledComponent);\n+\n+ ReactDOMServer.renderToString();\n+ });\n+ });\n });\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerLifecycles-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerLifecycles-test.js\nindex 3de800d0ac..10171a0e06 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerLifecycles-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerLifecycles-test.js\n@@ -33,7 +33,7 @@ describe('ReactDOMServerLifecycles', () => {\n resetModules();\n });\n \n- it('should invoke the correct lifecycle hooks', () => {\n+ it('should invoke the correct legacy lifecycle hooks', () => {\n const log = [];\n \n class Outer extends React.Component {\n@@ -65,6 +65,59 @@ describe('ReactDOMServerLifecycles', () => {\n ]);\n });\n \n+ it('should invoke the correct new lifecycle hooks', () => {\n+ const log = [];\n+\n+ class Outer extends React.Component {\n+ state = {};\n+ static getDerivedStateFromProps() {\n+ log.push('outer getDerivedStateFromProps');\n+ return null;\n+ }\n+ render() {\n+ log.push('outer render');\n+ return ;\n+ }\n+ }\n+\n+ class Inner extends React.Component {\n+ state = {};\n+ static getDerivedStateFromProps() {\n+ log.push('inner getDerivedStateFromProps');\n+ return null;\n+ }\n+ render() {\n+ log.push('inner render');\n+ return null;\n+ }\n+ }\n+\n+ ReactDOMServer.renderToString();\n+ expect(log).toEqual([\n+ 'outer getDerivedStateFromProps',\n+ 'outer render',\n+ 'inner getDerivedStateFromProps',\n+ 'inner render',\n+ ]);\n+ });\n+\n+ it('should not invoke unsafe cWM if static gDSFP is present', () => {\n+ class Component extends React.Component {\n+ state = {};\n+ static getDerivedStateFromProps() {\n+ return null;\n+ }\n+ UNSAFE_componentWillMount() {\n+ throw Error('unexpected');\n+ }\n+ render() {\n+ return null;\n+ }\n+ }\n+\n+ ReactDOMServer.renderToString();\n+ });\n+\n it('should update instance.state with value returned from getDerivedStateFromProps', () => {\n class Grandparent extends React.Component {\n state = {\ndiff --git a\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js b\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js\nindex 4e6622cac1..99d409cd12 100644\n--- a\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js\n+++ b\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js\n@@ -514,7 +514,10 @@ function resolve(\n if (inst.UNSAFE_componentWillMount || inst.componentWillMount) {\n if (inst.componentWillMount) {\n if (__DEV__) {\n- if (warnAboutDeprecatedLifecycles) {\n+ if (\n+ warnAboutDeprecatedLifecycles &&\n+ inst.componentWillMount.__suppressDeprecationWarning !== true\n+ ) {\n const componentName = getComponentName(Component) || 'Unknown';\n \n if (!didWarnAboutDeprecatedWillMount[componentName]) {\n@@ -534,8 +537,14 @@ function resolve(\n }\n }\n \n- inst.componentWillMount();\n- } else {\n+ \/\/ In order to support react-lifecycles-compat polyfilled components,\n+ \/\/ Unsafe lifecycles should not be invoked for any component with the new gDSFP.\n+ if (typeof Component.getDerivedStateFromProps !== 'function') {\n+ inst.componentWillMount();\n+ }\n+ } else if (typeof Component.getDerivedStateFromProps !== 'function') {\n+ \/\/ In order to support react-lifecycles-compat polyfilled components,\n+ \/\/ Unsafe lifecycles should not be invoked for any component with the new gDSFP.\n inst.UNSAFE_componentWillMount();\n }\n if (queue.length) {\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberClassComponent.js b\/packages\/react-reconciler\/src\/ReactFiberClassComponent.js\nindex 90ca86a992..7f83d38d05 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberClassComponent.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberClassComponent.js\n@@ -524,8 +524,11 @@ export default function(\n \n if (typeof type.getDerivedStateFromProps === 'function') {\n if (__DEV__) {\n+ \/\/ Don't warn about react-lifecycles-compat polyfilled components\n if (\n- typeof instance.componentWillReceiveProps === 'function' ||\n+ (typeof instance.componentWillReceiveProps === 'function' &&\n+ instance.componentWillReceiveProps.__suppressDeprecationWarning !==\n+ true) ||\n typeof instance.UNSAFE_componentWillReceiveProps === 'function'\n ) {\n const componentName = getComponentName(workInProgress) || 'Unknown';\n@@ -627,9 +630,12 @@ export default function(\n }\n }\n \n+ \/\/ In order to support react-lifecycles-compat polyfilled components,\n+ \/\/ Unsafe lifecycles should not be invoked for any component with the new gDSFP.\n if (\n- typeof instance.UNSAFE_componentWillMount === 'function' ||\n- typeof instance.componentWillMount === 'function'\n+ (typeof instance.UNSAFE_componentWillMount === 'function' ||\n+ typeof instance.componentWillMount === 'function') &&\n+ typeof workInProgress.type.getDerivedStateFromProps !== 'function'\n ) {\n callComponentWillMount(workInProgress, instance);\n \/\/ If we had additional state updates during this life-cycle, let's\n@@ -775,17 +781,21 @@ export default function(\n \/\/ ever the previously attempted to render - not the \"current\". However,\n \/\/ during componentDidUpdate we pass the \"current\" props.\n \n+ \/\/ In order to support react-lifecycles-compat polyfilled components,\n+ \/\/ Unsafe lifecycles should not be invoked for any component with the new gDSFP.\n if (\n (typeof instance.UNSAFE_componentWillReceiveProps === 'function' ||\n typeof instance.componentWillReceiveProps === 'function') &&\n- (oldProps !== newProps || oldContext !== newContext)\n+ typeof workInProgress.type.getDerivedStateFromProps !== 'function'\n ) {\n- callComponentWillReceiveProps(\n- workInProgress,\n- instance,\n- newProps,\n- newContext,\n- );\n+ if (oldProps !== newProps || oldContext !== newContext) {\n+ callComponentWillReceiveProps(\n+ workInProgress,\n+ instance,\n+ newProps,\n+ newContext,\n+ );\n+ }\n }\n \n let partialState;\n@@ -856,9 +866,12 @@ export default function(\n );\n \n if (shouldUpdate) {\n+ \/\/ In order to support react-lifecycles-compat polyfilled components,\n+ \/\/ Unsafe lifecycles should not be invoked for any component with the new gDSFP.\n if (\n- typeof instance.UNSAFE_componentWillUpdate === 'function' ||\n- typeof instance.componentWillUpdate === 'function'\n+ (typeof instance.UNSAFE_componentWillUpdate === 'function' ||\n+ typeof instance.componentWillUpdate === 'function') &&\n+ typeof workInProgress.type.getDerivedStateFromProps !== 'function'\n ) {\n if (typeof instance.componentWillUpdate === 'function') {\n startPhaseTimer(workInProgress, 'componentWillUpdate');\ndiff --git a\/packages\/react-reconciler\/src\/ReactStrictModeWarnings.js b\/packages\/react-reconciler\/src\/ReactStrictModeWarnings.js\nindex fb1b15d3d1..8be9b1dc50 100644\n--- a\/packages\/react-reconciler\/src\/ReactStrictModeWarnings.js\n+++ b\/packages\/react-reconciler\/src\/ReactStrictModeWarnings.js\n@@ -199,6 +199,16 @@ if (__DEV__) {\n return;\n }\n \n+ \/\/ Don't warn about react-lifecycles-compat polyfilled components.\n+ \/\/ Note that it is sufficient to check for the presence of a\n+ \/\/ single lifecycle, componentWillMount, with the polyfill flag.\n+ if (\n+ typeof instance.componentWillMount === 'function' &&\n+ instance.componentWillMount.__suppressDeprecationWarning === true\n+ ) {\n+ return;\n+ }\n+\n if (typeof instance.componentWillMount === 'function') {\n pendingComponentWillMountWarnings.push(fiber);\n }\n@@ -225,6 +235,16 @@ if (__DEV__) {\n return;\n }\n \n+ \/\/ Don't warn about react-lifecycles-compat polyfilled components.\n+ \/\/ Note that it is sufficient to check for the presence of a\n+ \/\/ single lifecycle, componentWillMount, with the polyfill flag.\n+ if (\n+ typeof instance.componentWillMount === 'function' &&\n+ instance.componentWillMount.__suppressDeprecationWarning === true\n+ ) {\n+ return;\n+ }\n+\n let warningsForRoot;\n if (!pendingUnsafeLifecycleWarnings.has(strictRoot)) {\n warningsForRoot = {\ndiff --git a\/packages\/react-test-renderer\/src\/ReactShallowRenderer.js b\/packages\/react-test-renderer\/src\/ReactShallowRenderer.js\nindex fc2ffbc855..01fd15d28c 100644\n--- a\/packages\/react-test-renderer\/src\/ReactShallowRenderer.js\n+++ b\/packages\/react-test-renderer\/src\/ReactShallowRenderer.js\n@@ -180,7 +180,12 @@ class ReactShallowRenderer {\n \n if (typeof this._instance.componentWillMount === 'function') {\n if (__DEV__) {\n- if (warnAboutDeprecatedLifecycles) {\n+ \/\/ Don't warn about react-lifecycles-compat polyfilled components\n+ if (\n+ warnAboutDeprecatedLifecycles &&\n+ this._instance.componentWillMount.__suppressDeprecationWarning !==\n+ true\n+ ) {\n const componentName = getName(element.type, this._instance);\n if (!didWarnAboutLegacyWillMount[componentName]) {\n warning(\n@@ -198,8 +203,15 @@ class ReactShallowRenderer {\n }\n }\n }\n- this._instance.componentWillMount();\n- } else {\n+\n+ \/\/ In order to support react-lifecycles-compat polyfilled components,\n+ \/\/ Unsafe lifecycles should not be invoked for any component with the new gDSFP.\n+ if (typeof element.type.getDerivedStateFromProps !== 'function') {\n+ this._instance.componentWillMount();\n+ }\n+ } else if (typeof element.type.getDerivedStateFromProps !== 'function') {\n+ \/\/ In order to support react-lifecycles-compat polyfilled components,\n+ \/\/ Unsafe lifecycles should not be invoked for any component with the new gDSFP.\n this._instance.UNSAFE_componentWillMount();\n }\n \n@@ -242,10 +254,17 @@ class ReactShallowRenderer {\n }\n }\n }\n- this._instance.componentWillReceiveProps(props, context);\n+ \/\/ In order to support react-lifecycles-compat polyfilled components,\n+ \/\/ Unsafe lifecycles should not be invoked for any component with the new gDSFP.\n+ if (typeof element.type.getDerivedStateFromProps !== 'function') {\n+ this._instance.componentWillReceiveProps(props, context);\n+ }\n } else if (\n- typeof this._instance.UNSAFE_componentWillReceiveProps === 'function'\n+ typeof this._instance.UNSAFE_componentWillReceiveProps === 'function' &&\n+ typeof element.type.getDerivedStateFromProps !== 'function'\n ) {\n+ \/\/ In order to support react-lifecycles-compat polyfilled components,\n+ \/\/ Unsafe lifecycles should not be invoked for any component with the new gDSFP.\n this._instance.UNSAFE_componentWillReceiveProps(props, context);\n }\n \n@@ -292,10 +311,17 @@ class ReactShallowRenderer {\n }\n }\n \n- this._instance.componentWillUpdate(props, state, context);\n+ \/\/ In order to support react-lifecycles-compat polyfilled components,\n+ \/\/ Unsafe lifecycles should not be invoked for any component with the new gDSFP.\n+ if (typeof type.getDerivedStateFromProps !== 'function') {\n+ this._instance.componentWillUpdate(props, state, context);\n+ }\n } else if (\n- typeof this._instance.UNSAFE_componentWillUpdate === 'function'\n+ typeof this._instance.UNSAFE_componentWillUpdate === 'function' &&\n+ typeof type.getDerivedStateFromProps !== 'function'\n ) {\n+ \/\/ In order to support react-lifecycles-compat polyfilled components,\n+ \/\/ Unsafe lifecycles should not be invoked for any component with the new gDSFP.\n this._instance.UNSAFE_componentWillUpdate(props, state, context);\n }\n }\n@@ -316,8 +342,11 @@ class ReactShallowRenderer {\n \n if (typeof type.getDerivedStateFromProps === 'function') {\n if (__DEV__) {\n+ \/\/ Don't warn about react-lifecycles-compat polyfilled components\n if (\n- typeof this._instance.componentWillReceiveProps === 'function' ||\n+ (typeof this._instance.componentWillReceiveProps === 'function' &&\n+ this._instance.componentWillReceiveProps\n+ .__suppressDeprecationWarning !== true) ||\n typeof this._instance.UNSAFE_componentWillReceiveProps === 'function'\n ) {\n const componentName = getName(type, this._instance);\ndiff --git a\/packages\/react-test-renderer\/src\/__tests__\/ReactShallowRenderer-test.internal.js b\/packages\/react-test-renderer\/src\/__tests__\/ReactShallowRenderer-test.internal.js\nindex 0c5813f7b2..0d1957a980 100644\n--- a\/packages\/react-test-renderer\/src\/__tests__\/ReactShallowRenderer-test.internal.js\n+++ b\/packages\/react-test-renderer\/src\/__tests__\/ReactShallowRenderer-test.internal.js\n@@ -23,6 +23,10 @@ describe('ReactShallowRenderer', () => {\n React = require('react');\n });\n \n+ afterEach(() => {\n+ jest.resetModules();\n+ });\n+\n \/\/ TODO (RFC #6) Merge this back into ReactShallowRenderer-test once\n \/\/ the 'warnAboutDeprecatedLifecycles' feature flag has been removed.\n it('should warn if deprecated lifecycles exist', () => {\n@@ -50,4 +54,31 @@ describe('ReactShallowRenderer', () => {\n \/\/ Verify no duplicate warnings\n shallowRenderer.render();\n });\n+\n+ describe('react-lifecycles-compat', () => {\n+ \/\/ TODO Replace this with react-lifecycles-compat once it's been published\n+ function polyfill(Component) {\n+ Component.prototype.componentWillMount = function() {};\n+ Component.prototype.componentWillMount.__suppressDeprecationWarning = true;\n+ Component.prototype.componentWillReceiveProps = function() {};\n+ Component.prototype.componentWillReceiveProps.__suppressDeprecationWarning = true;\n+ }\n+\n+ it('should not warn about deprecated cWM\/cWRP for polyfilled components', () => {\n+ class PolyfilledComponent extends React.Component {\n+ state = {};\n+ static getDerivedStateFromProps() {\n+ return null;\n+ }\n+ render() {\n+ return null;\n+ }\n+ }\n+\n+ polyfill(PolyfilledComponent);\n+\n+ const shallowRenderer = createRenderer();\n+ shallowRenderer.render();\n+ });\n+ });\n });\ndiff --git a\/packages\/react-test-renderer\/src\/__tests__\/ReactShallowRenderer-test.js b\/packages\/react-test-renderer\/src\/__tests__\/ReactShallowRenderer-test.js\nindex 02532ec6fb..240129421e 100644\n--- a\/packages\/react-test-renderer\/src\/__tests__\/ReactShallowRenderer-test.js\n+++ b\/packages\/react-test-renderer\/src\/__tests__\/ReactShallowRenderer-test.js\n@@ -23,13 +23,11 @@ describe('ReactShallowRenderer', () => {\n React = require('react');\n });\n \n- it('should call all of the lifecycle hooks', () => {\n+ it('should call all of the legacy lifecycle hooks', () => {\n const logs = [];\n const logger = message => () => logs.push(message) || true;\n \n class SomeComponent extends React.Component {\n- state = {};\n- static getDerivedStateFromProps = logger('getDerivedStateFromProps');\n UNSAFE_componentWillMount = logger('componentWillMount');\n componentDidMount = logger('componentDidMount');\n UNSAFE_componentWillReceiveProps = logger('componentWillReceiveProps');\n@@ -43,16 +41,11 @@ describe('ReactShallowRenderer', () => {\n }\n \n const shallowRenderer = createRenderer();\n-\n- expect(() => shallowRenderer.render()).toWarnDev(\n- 'Warning: SomeComponent: Defines both componentWillReceiveProps() and static ' +\n- 'getDerivedStateFromProps() methods. ' +\n- 'We recommend using only getDerivedStateFromProps().',\n- );\n+ shallowRenderer.render();\n \n \/\/ Calling cDU might lead to problems with host component references.\n \/\/ Since our components aren't really mounted, refs won't be available.\n- expect(logs).toEqual(['getDerivedStateFromProps', 'componentWillMount']);\n+ expect(logs).toEqual(['componentWillMount']);\n \n logs.splice(0);\n \n@@ -68,12 +61,75 @@ describe('ReactShallowRenderer', () => {\n \/\/ The previous shallow renderer did not trigger cDU for props changes.\n expect(logs).toEqual([\n 'componentWillReceiveProps',\n- 'getDerivedStateFromProps',\n 'shouldComponentUpdate',\n 'componentWillUpdate',\n ]);\n });\n \n+ it('should call all of the new lifecycle hooks', () => {\n+ const logs = [];\n+ const logger = message => () => logs.push(message) || true;\n+\n+ class SomeComponent extends React.Component {\n+ state = {};\n+ static getDerivedStateFromProps = logger('getDerivedStateFromProps');\n+ componentDidMount = logger('componentDidMount');\n+ shouldComponentUpdate = logger('shouldComponentUpdate');\n+ componentDidUpdate = logger('componentDidUpdate');\n+ componentWillUnmount = logger('componentWillUnmount');\n+ render() {\n+ return

;\n+ }\n+ }\n+\n+ const shallowRenderer = createRenderer();\n+ shallowRenderer.render();\n+\n+ \/\/ Calling cDU might lead to problems with host component references.\n+ \/\/ Since our components aren't really mounted, refs won't be available.\n+ expect(logs).toEqual(['getDerivedStateFromProps']);\n+\n+ logs.splice(0);\n+\n+ const instance = shallowRenderer.getMountedInstance();\n+ instance.setState({});\n+\n+ expect(logs).toEqual(['shouldComponentUpdate']);\n+\n+ logs.splice(0);\n+\n+ shallowRenderer.render();\n+\n+ \/\/ The previous shallow renderer did not trigger cDU for props changes.\n+ expect(logs).toEqual(['getDerivedStateFromProps', 'shouldComponentUpdate']);\n+ });\n+\n+ it('should not invoke deprecated lifecycles (cWM\/cWRP\/cWU) if new static gDSFP is present', () => {\n+ class Component extends React.Component {\n+ state = {};\n+ static getDerivedStateFromProps() {\n+ return null;\n+ }\n+ componentWillMount() {\n+ throw Error('unexpected');\n+ }\n+ componentWillReceiveProps() {\n+ throw Error('unexpected');\n+ }\n+ componentWillUpdate() {\n+ throw Error('unexpected');\n+ }\n+ render() {\n+ return null;\n+ }\n+ }\n+\n+ const shallowRenderer = createRenderer();\n+ expect(() => shallowRenderer.render()).toWarnDev(\n+ 'Defines both componentWillReceiveProps() and static getDerivedStateFromProps()',\n+ );\n+ });\n+\n it('should only render 1 level deep', () => {\n function Parent() {\n return (\n@@ -422,11 +478,10 @@ describe('ReactShallowRenderer', () => {\n expect(result).toEqual(

);\n });\n \n- it('passes expected params to component lifecycle methods', () => {\n+ it('passes expected params to legacy component lifecycle methods', () => {\n const componentDidUpdateParams = [];\n const componentWillReceivePropsParams = [];\n const componentWillUpdateParams = [];\n- const getDerivedStateFromPropsParams = [];\n const setStateParams = [];\n const shouldComponentUpdateParams = [];\n \n@@ -448,10 +503,6 @@ describe('ReactShallowRenderer', () => {\n componentDidUpdate(...args) {\n componentDidUpdateParams.push(...args);\n }\n- static getDerivedStateFromProps(...args) {\n- getDerivedStateFromPropsParams.push(args);\n- return null;\n- }\n UNSAFE_componentWillReceiveProps(...args) {\n componentWillReceivePropsParams.push(...args);\n this.setState((...innerArgs) => {\n@@ -472,22 +523,10 @@ describe('ReactShallowRenderer', () => {\n }\n \n const shallowRenderer = createRenderer();\n-\n- \/\/ The only lifecycle hook that should be invoked on initial render\n- \/\/ Is the static getDerivedStateFromProps() methods\n- expect(() =>\n- shallowRenderer.render(\n- React.createElement(SimpleComponent, initialProp),\n- initialContext,\n- ),\n- ).toWarnDev(\n- 'SimpleComponent: Defines both componentWillReceiveProps() and static ' +\n- 'getDerivedStateFromProps() methods. We recommend using ' +\n- 'only getDerivedStateFromProps().',\n+ shallowRenderer.render(\n+ React.createElement(SimpleComponent, initialProp),\n+ initialContext,\n );\n- expect(getDerivedStateFromPropsParams).toEqual([\n- [initialProp, initialState],\n- ]);\n expect(componentDidUpdateParams).toEqual([]);\n expect(componentWillReceivePropsParams).toEqual([]);\n expect(componentWillUpdateParams).toEqual([]);\n@@ -504,10 +543,6 @@ describe('ReactShallowRenderer', () => {\n updatedContext,\n ]);\n expect(setStateParams).toEqual([initialState, initialProp]);\n- expect(getDerivedStateFromPropsParams).toEqual([\n- [initialProp, initialState],\n- [updatedProp, initialState],\n- ]);\n expect(shouldComponentUpdateParams).toEqual([\n updatedProp,\n updatedState,\n@@ -521,6 +556,72 @@ describe('ReactShallowRenderer', () => {\n expect(componentDidUpdateParams).toEqual([]);\n });\n \n+ it('passes expected params to new component lifecycle methods', () => {\n+ const componentDidUpdateParams = [];\n+ const getDerivedStateFromPropsParams = [];\n+ const shouldComponentUpdateParams = [];\n+\n+ const initialProp = {prop: 'init prop'};\n+ const initialState = {state: 'init state'};\n+ const initialContext = {context: 'init context'};\n+ const updatedProp = {prop: 'updated prop'};\n+ const updatedContext = {context: 'updated context'};\n+\n+ class SimpleComponent extends React.Component {\n+ constructor(props, context) {\n+ super(props, context);\n+ this.state = initialState;\n+ }\n+ static contextTypes = {\n+ context: PropTypes.string,\n+ };\n+ componentDidUpdate(...args) {\n+ componentDidUpdateParams.push(...args);\n+ }\n+ static getDerivedStateFromProps(...args) {\n+ getDerivedStateFromPropsParams.push(args);\n+ return null;\n+ }\n+ shouldComponentUpdate(...args) {\n+ shouldComponentUpdateParams.push(...args);\n+ return true;\n+ }\n+ render() {\n+ return null;\n+ }\n+ }\n+\n+ const shallowRenderer = createRenderer();\n+\n+ \/\/ The only lifecycle hook that should be invoked on initial render\n+ \/\/ Is the static getDerivedStateFromProps() methods\n+ shallowRenderer.render(\n+ React.createElement(SimpleComponent, initialProp),\n+ initialContext,\n+ );\n+ expect(getDerivedStateFromPropsParams).toEqual([\n+ [initialProp, initialState],\n+ ]);\n+ expect(componentDidUpdateParams).toEqual([]);\n+ expect(shouldComponentUpdateParams).toEqual([]);\n+\n+ \/\/ Lifecycle hooks should be invoked with the correct prev\/next params on update.\n+ shallowRenderer.render(\n+ React.createElement(SimpleComponent, updatedProp),\n+ updatedContext,\n+ );\n+ expect(getDerivedStateFromPropsParams).toEqual([\n+ [initialProp, initialState],\n+ [updatedProp, initialState],\n+ ]);\n+ expect(shouldComponentUpdateParams).toEqual([\n+ updatedProp,\n+ initialState,\n+ updatedContext,\n+ ]);\n+ expect(componentDidUpdateParams).toEqual([]);\n+ });\n+\n it('can shallowly render components with ref as function', () => {\n class SimpleComponent extends React.Component {\n state = {clicked: false};\ndiff --git a\/packages\/react\/src\/__tests__\/ReactStrictMode-test.internal.js b\/packages\/react\/src\/__tests__\/ReactStrictMode-test.internal.js\nindex 5bab8df2dd..edbc5175a0 100644\n--- a\/packages\/react\/src\/__tests__\/ReactStrictMode-test.internal.js\n+++ b\/packages\/react\/src\/__tests__\/ReactStrictMode-test.internal.js\n@@ -42,18 +42,9 @@ describe('ReactStrictMode', () => {\n componentDidUpdate() {\n log.push('componentDidUpdate');\n }\n- UNSAFE_componentWillMount() {\n- log.push('componentWillMount');\n- }\n- UNSAFE_componentWillReceiveProps() {\n- log.push('componentWillReceiveProps');\n- }\n componentWillUnmount() {\n log.push('componentWillUnmount');\n }\n- UNSAFE_componentWillUpdate() {\n- log.push('componentWillUpdate');\n- }\n shouldComponentUpdate() {\n log.push('shouldComponentUpdate');\n return shouldComponentUpdate;\n@@ -64,22 +55,13 @@ describe('ReactStrictMode', () => {\n }\n }\n \n- let component;\n-\n- expect(() => {\n- component = ReactTestRenderer.create();\n- }).toWarnDev(\n- 'ClassComponent: Defines both componentWillReceiveProps() ' +\n- 'and static getDerivedStateFromProps() methods. ' +\n- 'We recommend using only getDerivedStateFromProps().',\n- );\n+ const component = ReactTestRenderer.create();\n \n expect(log).toEqual([\n 'constructor',\n 'constructor',\n 'getDerivedStateFromProps',\n 'getDerivedStateFromProps',\n- 'componentWillMount',\n 'render',\n 'render',\n 'componentDidMount',\n@@ -90,11 +72,9 @@ describe('ReactStrictMode', () => {\n \n component.update();\n expect(log).toEqual([\n- 'componentWillReceiveProps',\n 'getDerivedStateFromProps',\n 'getDerivedStateFromProps',\n 'shouldComponentUpdate',\n- 'componentWillUpdate',\n 'render',\n 'render',\n 'componentDidUpdate',\n@@ -105,7 +85,6 @@ describe('ReactStrictMode', () => {\n \n component.update();\n expect(log).toEqual([\n- 'componentWillReceiveProps',\n 'getDerivedStateFromProps',\n 'getDerivedStateFromProps',\n 'shouldComponentUpdate',\ndiff --git a\/packages\/react\/src\/__tests__\/createReactClassIntegration-test.js b\/packages\/react\/src\/__tests__\/createReactClassIntegration-test.js\nindex aa46acf4fc..c6156e7ea8 100644\n--- a\/packages\/react\/src\/__tests__\/createReactClassIntegration-test.js\n+++ b\/packages\/react\/src\/__tests__\/createReactClassIntegration-test.js\n@@ -449,4 +449,34 @@ describe('create-react-class-integration', () => {\n ReactDOM.render(, document.createElement('div')),\n ).toWarnDev('Did not properly initialize state during construction.');\n });\n+\n+ it('should not invoke deprecated lifecycles (cWM\/cWRP\/cWU) if new static gDSFP is present', () => {\n+ const Component = createReactClass({\n+ statics: {\n+ getDerivedStateFromProps: function() {\n+ return null;\n+ },\n+ },\n+ componentWillMount: function() {\n+ throw Error('unexpected');\n+ },\n+ componentWillReceiveProps: function() {\n+ throw Error('unexpected');\n+ },\n+ componentWillUpdate: function() {\n+ throw Error('unexpected');\n+ },\n+ getInitialState: function() {\n+ return {};\n+ },\n+ render: function() {\n+ return null;\n+ },\n+ });\n+\n+ expect(() => {\n+ ReactDOM.render(, document.createElement('div'));\n+ }).toWarnDev('Defines both componentWillReceiveProps');\n+ ReactDOM.render(, document.createElement('div'));\n+ });\n });\n","body":"* Suppress unsafe\/deprecation warnings for polyfilled components.\r\n* Don't invoke deprecated lifecycles if static gDSFP exists.\r\n* Applied recent changes to server rendering also","commit":{"authorName":"Brian Vaughn","authorEmail":"brian.david.vaughn@gmail.com","authoredAt":"2018-01-29T08:06:50-08:00","subject":"React lifecycles compat (#12105)","revision":"a7b9f98e7abab7305978b4b36881c8267a450097","shortRevision":"a7b9f98e7a"},"parents":["ef8d6d92a28835a8ab89a876f877306a5c3feffe"]}

dillon1000/react

Files changed