RFC 6: Deprecate unsafe lifecycles

packages/react-call-return/src/__tests__/ReactCallReturn-test.js

@@ -275,7 +275,7 @@ describe('ReactCallReturn', () => {
         return ReactCallReturn.unstable_createReturn(this.props.children);
       }
 
-      componentWillMount() {
+      UNSAFE_componentWillMount() {
         ops.push(`Mount Return ${this.props.value}`);
       }
 

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

@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let ReactDOM;
+let ReactFeatureFlags;
+
+describe('ReactComponentLifeCycle', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.warnAboutDeprecatedLifecycles = true;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+  });
+
+  // TODO (RFC #6) Merge this back into ReactComponentLifeCycles-test once
+  // the 'warnAboutDeprecatedLifecycles' feature flag has been removed.
+  it('warns about deprecated unsafe lifecycles', function() {
+    class MyComponent extends React.Component {
+      componentWillMount() {}
+      componentWillReceiveProps() {}
+      componentWillUpdate() {}
+      render() {
+        return null;
+      }
+    }
+
+    const container = document.createElement('div');
+    expect(() => ReactDOM.render(<MyComponent x={1} />, container)).toWarnDev([
+      'Warning: MyComponent: componentWillMount() is deprecated and will be ' +
+        'removed in the next major version. ' +
+        'Please use UNSAFE_componentWillMount() instead.',
+    ]);
+
+    expect(() => ReactDOM.render(<MyComponent x={2} />, container)).toWarnDev([
+      'Warning: MyComponent: componentWillReceiveProps() is deprecated and ' +
+        'will be removed in the next major version. ' +
+        'Please use UNSAFE_componentWillReceiveProps() instead.',
+      'Warning: MyComponent: componentWillUpdate() is deprecated and will be ' +
+        'removed in the next major version. ' +
+        'Please use UNSAFE_componentWillUpdate() instead.',
+    ]);
+
+    // Dedupe check (instantiate and update)
+    ReactDOM.render(<MyComponent key="new" x={1} />, container);
+    ReactDOM.render(<MyComponent key="new" x={2} />, container);
+  });
+});

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

@@ -165,7 +165,7 @@ describe('ReactComponentLifeCycle', () => {
   // had provided a getInitialState method.
   it('throws when accessing state in componentWillMount', () => {
     class StatefulComponent extends React.Component {
-      componentWillMount() {
+      UNSAFE_componentWillMount() {
         void this.state.yada;
       }
 
@@ -182,7 +182,7 @@ describe('ReactComponentLifeCycle', () => {
 
   it('should allow update state inside of componentWillMount', () => {
     class StatefulComponent extends React.Component {
-      componentWillMount() {
+      UNSAFE_componentWillMount() {
         this.setState({stateField: 'something'});
       }
 
@@ -231,7 +231,7 @@ describe('ReactComponentLifeCycle', () => {
         // reaching into the updater.
         return this.updater.isMounted(this);
       }
-      componentWillMount() {
+      UNSAFE_componentWillMount() {
         expect(this._isMounted()).toBeFalsy();
       }
       componentDidMount() {
@@ -258,7 +258,7 @@ describe('ReactComponentLifeCycle', () => {
         // reaching into the updater.
         return this.updater.isMounted(this);
       }
-      componentWillMount() {
+      UNSAFE_componentWillMount() {
         expect(this._isMounted()).toBeFalsy();
       }
       componentDidMount() {
@@ -334,7 +334,7 @@ describe('ReactComponentLifeCycle', () => {
         this.state = initState;
       }
 
-      componentWillMount() {
+      UNSAFE_componentWillMount() {
         this._testJournal.stateAtStartOfWillMount = clone(this.state);
         this._testJournal.lifeCycleAtStartOfWillMount = getLifeCycleState(this);
         this.state.hasWillMountCompleted = true;
@@ -509,11 +509,17 @@ describe('ReactComponentLifeCycle', () => {
       };
     };
     class Outer extends React.Component {
-      componentWillMount = logger('outer componentWillMount');
+      static getDerivedStateFromProps(props, prevState) {
+        log.push('outer getDerivedStateFromProps');
+        return null;
+      }
+      UNSAFE_componentWillMount = logger('outer componentWillMount');
       componentDidMount = logger('outer componentDidMount');
-      componentWillReceiveProps = logger('outer componentWillReceiveProps');
+      UNSAFE_componentWillReceiveProps = logger(
+        'outer componentWillReceiveProps',
+      );
       shouldComponentUpdate = logger('outer shouldComponentUpdate');
-      componentWillUpdate = logger('outer componentWillUpdate');
+      UNSAFE_componentWillUpdate = logger('outer componentWillUpdate');
       componentDidUpdate = logger('outer componentDidUpdate');
       componentWillUnmount = logger('outer componentWillUnmount');
       render() {
@@ -526,11 +532,17 @@ describe('ReactComponentLifeCycle', () => {
     }
 
     class Inner extends React.Component {
-      componentWillMount = logger('inner componentWillMount');
+      static getDerivedStateFromProps(props, prevState) {
+        log.push('inner getDerivedStateFromProps');
+        return null;
+      }
+      UNSAFE_componentWillMount = logger('inner componentWillMount');
       componentDidMount = logger('inner componentDidMount');
-      componentWillReceiveProps = logger('inner componentWillReceiveProps');
+      UNSAFE_componentWillReceiveProps = logger(
+        'inner componentWillReceiveProps',
+      );
       shouldComponentUpdate = logger('inner shouldComponentUpdate');
-      componentWillUpdate = logger('inner componentWillUpdate');
+      UNSAFE_componentWillUpdate = logger('inner componentWillUpdate');
       componentDidUpdate = logger('inner componentDidUpdate');
       componentWillUnmount = logger('inner componentWillUnmount');
       render() {
@@ -540,21 +552,33 @@ describe('ReactComponentLifeCycle', () => {
 
     const container = document.createElement('div');
     log = [];
-    ReactDOM.render(<Outer x={17} />, container);
+    expect(() => ReactDOM.render(<Outer x={1} />, container)).toWarnDev([
+      'Warning: Outer: Defines both componentWillReceiveProps() and static ' +
+        'getDerivedStateFromProps() methods. ' +
+        'We recommend using only getDerivedStateFromProps().',
+      'Warning: Inner: Defines both componentWillReceiveProps() and static ' +
+        'getDerivedStateFromProps() methods. ' +
+        'We recommend using only getDerivedStateFromProps().',
+    ]);
     expect(log).toEqual([
+      'outer getDerivedStateFromProps',
       'outer componentWillMount',
+      'inner getDerivedStateFromProps',
       'inner componentWillMount',
       'inner componentDidMount',
       'outer componentDidMount',
     ]);
 
+    // Dedup warnings
     log = [];
-    ReactDOM.render(<Outer x={42} />, container);
+    ReactDOM.render(<Outer x={2} />, container);
     expect(log).toEqual([
       'outer componentWillReceiveProps',
+      'outer getDerivedStateFromProps',
       'outer shouldComponentUpdate',
       'outer componentWillUpdate',
       'inner componentWillReceiveProps',
+      'inner getDerivedStateFromProps',
       'inner shouldComponentUpdate',
       'inner componentWillUpdate',
       'inner componentDidUpdate',
@@ -579,7 +603,7 @@ describe('ReactComponentLifeCycle', () => {
           log.push('render');
           return <Child />;
         },
-        componentWillMount() {
+        UNSAFE_componentWillMount() {
           log.push('will mount');
         },
         componentDidMount() {
@@ -619,4 +643,22 @@ describe('ReactComponentLifeCycle', () => {
       'ref',
     ]);
   });
+
+  it('should warn if getDerivedStateFromProps returns undefined', () => {
+    class MyComponent extends React.Component {
+      static getDerivedStateFromProps() {}
+      render() {
+        return null;
+      }
+    }
+
+    const div = document.createElement('div');
+    expect(() => ReactDOM.render(<MyComponent />, div)).toWarnDev(
+      'MyComponent.getDerivedStateFromProps(): A valid state object (or null) must ' +
+        'be returned. You may have returned undefined.',
+    );
+
+    // De-duped
+    ReactDOM.render(<MyComponent />, div);
+  });
 });

packages/react-dom/src/__tests__/ReactCompositeComponent-test.js

@@ -850,7 +850,7 @@ describe('ReactCompositeComponent', () => {
         foo: PropTypes.string.isRequired,
       };
 
-      componentWillReceiveProps(nextProps, nextContext) {
+      UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
         expect('foo' in nextContext).toBe(true);
       }
 
@@ -865,7 +865,7 @@ describe('ReactCompositeComponent', () => {
     }
 
     class Intermediary extends React.Component {
-      componentWillReceiveProps(nextProps, nextContext) {
+      UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
         expect('foo' in nextContext).toBe(false);
       }
 
@@ -916,7 +916,7 @@ describe('ReactCompositeComponent', () => {
         foo: PropTypes.string.isRequired,
       };
 
-      componentWillReceiveProps(nextProps, nextContext) {
+      UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
         expect('foo' in nextContext).toBe(true);
 
         if (nextProps !== this.props) {
@@ -938,7 +938,7 @@ describe('ReactCompositeComponent', () => {
         foo: PropTypes.string.isRequired,
       };
 
-      componentWillReceiveProps(nextProps, nextContext) {
+      UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
         expect('foo' in nextContext).toBe(true);
 
         if (nextProps !== this.props) {
@@ -956,7 +956,7 @@ describe('ReactCompositeComponent', () => {
     }
 
     class ChildWithoutContext extends React.Component {
-      componentWillReceiveProps(nextProps, nextContext) {
+      UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
         expect('foo' in nextContext).toBe(false);
 
         if (nextProps !== this.props) {
@@ -1047,7 +1047,7 @@ describe('ReactCompositeComponent', () => {
     class Component extends React.Component {
       state = {updated: false};
 
-      componentWillReceiveProps(props) {
+      UNSAFE_componentWillReceiveProps(props) {
         expect(props.update).toBe(1);
         expect(renders).toBe(1);
         this.setState({updated: true});
@@ -1075,7 +1075,7 @@ describe('ReactCompositeComponent', () => {
     class Component extends React.Component {
       state = {updated: false};
 
-      componentWillReceiveProps(props) {
+      UNSAFE_componentWillReceiveProps(props) {
         expect(props.update).toBe(1);
         expect(renders).toBe(1);
         this.setState({updated: true});
@@ -1377,7 +1377,7 @@ describe('ReactCompositeComponent', () => {
     const log = [];
 
     class Spy extends React.Component {
-      componentWillMount() {
+      UNSAFE_componentWillMount() {
         log.push(this.props.name + ' componentWillMount');
       }
       render() {
@@ -1556,7 +1556,7 @@ describe('ReactCompositeComponent', () => {
         };
       }
 
-      componentWillMount() {
+      UNSAFE_componentWillMount() {
         this.setState(
           {hasUpdatedState: true},
           () => (stateSuccessfullyUpdated = this.state.hasUpdatedState),
@@ -1586,7 +1586,7 @@ describe('ReactCompositeComponent', () => {
         };
       }
 
-      componentWillMount() {
+      UNSAFE_componentWillMount() {
         instance = this;
       }
 

packages/react-dom/src/__tests__/ReactCompositeComponentState-test.js

@@ -46,7 +46,7 @@ describe('ReactCompositeComponent-state', () => {
         return <div>{this.state.color}</div>;
       }
 
-      componentWillMount() {
+      UNSAFE_componentWillMount() {
         this.peekAtState('componentWillMount-start');
         this.setState(function(state) {
           this.peekAtState('before-setState-sunrise', state);
@@ -78,7 +78,7 @@ describe('ReactCompositeComponent-state', () => {
         this.peekAtState('componentDidMount-end');
       }
 
-      componentWillReceiveProps(newProps) {
+      UNSAFE_componentWillReceiveProps(newProps) {
         this.peekAtState('componentWillReceiveProps-start');
         if (newProps.nextColor) {
           this.setState(function(state) {
@@ -105,7 +105,7 @@ describe('ReactCompositeComponent-state', () => {
         return true;
       }
 
-      componentWillUpdate(nextProps, nextState) {
+      UNSAFE_componentWillUpdate(nextProps, nextState) {
         this.peekAtState('componentWillUpdate-currentState');
         this.peekAtState('componentWillUpdate-nextState', nextState);
       }
@@ -323,7 +323,7 @@ describe('ReactCompositeComponent-state', () => {
     }
     let updated = false;
     class Child extends React.Component {
-      componentWillReceiveProps() {
+      UNSAFE_componentWillReceiveProps() {
         if (updated) {
           return;
         }
@@ -383,7 +383,7 @@ describe('ReactCompositeComponent-state', () => {
     let ops = [];
     class Test extends React.Component {
       state = {step: 1, extra: true};
-      componentWillReceiveProps() {
+      UNSAFE_componentWillReceiveProps() {
         this.setState({step: 2}, () => {
           // Tests that earlier setState callbacks are not dropped
           ops.push(
@@ -426,7 +426,7 @@ describe('ReactCompositeComponent-state', () => {
     let ops = [];
     class Test extends React.Component {
       state = {step: 1, extra: true};
-      componentWillMount() {
+      UNSAFE_componentWillMount() {
         this.setState({step: 2}, () => {
           // Tests that earlier setState callbacks are not dropped
           ops.push(

packages/react-dom/src/__tests__/ReactDOMServerIntegrationContext-test.js

@@ -231,7 +231,7 @@ describe('ReactDOMServerIntegration', () => {
           getChildContext() {
             return {text: this.state.text};
           }
-          componentWillMount() {
+          UNSAFE_componentWillMount() {
             this.setState({text: 'foo'});
           }
           render() {