Warn about non-static getDerivedStateFromProps/Catch (facebook#12431)

Author: gaearon

packages/react-reconciler/src/ReactFiberClassComponent.js

@@ -364,6 +364,22 @@ export default function(
         name,
         name,
       );
+      const noInstanceGetDerivedStateFromProps =
+        typeof instance.getDerivedStateFromProps !== 'function';
+      warning(
+        noInstanceGetDerivedStateFromProps,
+        '%s: getDerivedStateFromProps() is defined as an instance method ' +
+          'and will be ignored. Instead, declare it as a static method.',
+        name,
+      );
+      const noInstanceGetDerivedStateFromCatch =
+        typeof instance.getDerivedStateFromCatch !== 'function';
+      warning(
+        noInstanceGetDerivedStateFromCatch,
+        '%s: getDerivedStateFromCatch() is defined as an instance method ' +
+          'and will be ignored. Instead, declare it as a static method.',
+        name,
+      );
       const state = instance.state;
       if (state && (typeof state !== 'object' || isArray(state))) {
         warning(false, '%s.state: must be set to an object or null', name);

packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee

@@ -118,6 +118,28 @@ describe 'ReactCoffeeScriptClass', ->
     test React.createElement(Foo, foo: 'foo'), 'DIV', 'foo bar'
     undefined
 
+  it 'warns if getDerivedStateFromProps is not static', ->
+    class Foo extends React.Component
+      render: ->
+        div()
+      getDerivedStateFromProps: ->
+        {}
+    expect(->
+      ReactDOM.render(React.createElement(Foo, foo: 'foo'), container)
+    ).toWarnDev 'Foo: getDerivedStateFromProps() is defined as an instance method and will be ignored. Instead, declare it as a static method.',
+    undefined
+
+  it 'warns if getDerivedStateFromCatch is not static', ->
+    class Foo extends React.Component
+      render: ->
+        div()
+      getDerivedStateFromCatch: ->
+        {}
+    expect(->
+      ReactDOM.render(React.createElement(Foo, foo: 'foo'), container)
+    ).toWarnDev 'Foo: getDerivedStateFromCatch() is defined as an instance method and will be ignored. Instead, declare it as a static method.',
+    undefined
+
   it 'warns if state not initialized before static getDerivedStateFromProps', ->
     class Foo extends React.Component
       render: ->

packages/react/src/__tests__/ReactES6Class-test.js

@@ -128,6 +128,36 @@ describe('ReactES6Class', () => {
     test(<Foo foo="foo" />, 'DIV', 'foo bar');
   });
 
+  it('warns if getDerivedStateFromProps is not static', () => {
+    class Foo extends React.Component {
+      getDerivedStateFromProps() {
+        return {};
+      }
+      render() {
+        return <div />;
+      }
+    }
+    expect(() => ReactDOM.render(<Foo foo="foo" />, container)).toWarnDev(
+      'Foo: getDerivedStateFromProps() is defined as an instance method ' +
+        'and will be ignored. Instead, declare it as a static method.',
+    );
+  });
+
+  it('warns if getDerivedStateFromCatch is not static', () => {
+    class Foo extends React.Component {
+      getDerivedStateFromCatch() {
+        return {};
+      }
+      render() {
+        return <div />;
+      }
+    }
+    expect(() => ReactDOM.render(<Foo foo="foo" />, container)).toWarnDev(
+      'Foo: getDerivedStateFromCatch() is defined as an instance method ' +
+        'and will be ignored. Instead, declare it as a static method.',
+    );
+  });
+
   it('warns if state not initialized before static getDerivedStateFromProps', () => {
     class Foo extends React.Component {
       static getDerivedStateFromProps(nextProps, prevState) {

packages/react/src/__tests__/ReactTypeScriptClass-test.ts

@@ -378,6 +378,40 @@ describe('ReactTypeScriptClass', function() {
     test(React.createElement(Foo, {foo: 'foo'}), 'DIV', 'foo bar');
   });
 
+  it('warns if getDerivedStateFromProps is not static', function() {
+    class Foo extends React.Component {
+      getDerivedStateFromProps() {
+        return {};
+      }
+      render() {
+        return React.createElement('div', {});
+      }
+    }
+    expect(function() {
+      ReactDOM.render(React.createElement(Foo, {foo: 'foo'}), container);
+    }).toWarnDev(
+      'Foo: getDerivedStateFromProps() is defined as an instance method ' +
+        'and will be ignored. Instead, declare it as a static method.'
+    );
+  });
+
+  it('warns if getDerivedStateFromCatch is not static', function() {
+    class Foo extends React.Component {
+      getDerivedStateFromCatch() {
+        return {};
+      }
+      render() {
+        return React.createElement('div');
+      }
+    }
+    expect(function() {
+      ReactDOM.render(React.createElement(Foo, {foo: 'foo'}), container);
+    }).toWarnDev(
+      'Foo: getDerivedStateFromCatch() is defined as an instance method ' +
+        'and will be ignored. Instead, declare it as a static method.'
+    );
+  });
+
   it('warns if state not initialized before static getDerivedStateFromProps', function() {
     class Foo extends React.Component {
       static getDerivedStateFromProps(nextProps, prevState) {

packages/react/src/__tests__/createReactClassIntegration-test.js

@@ -433,6 +433,40 @@ describe('create-react-class-integration', () => {
     expect(instance.state.foo).toBe('bar');
   });
 
+  it('warns if getDerivedStateFromProps is not static', () => {
+    const Foo = createReactClass({
+      getDerivedStateFromProps() {
+        return {};
+      },
+      render() {
+        return <div />;
+      },
+    });
+    expect(() =>
+      ReactDOM.render(<Foo foo="foo" />, document.createElement('div')),
+    ).toWarnDev(
+      'Component: getDerivedStateFromProps() is defined as an instance method ' +
+        'and will be ignored. Instead, declare it as a static method.',
+    );
+  });
+
+  it('warns if getDerivedStateFromCatch is not static', () => {
+    const Foo = createReactClass({
+      getDerivedStateFromCatch() {
+        return {};
+      },
+      render() {
+        return <div />;
+      },
+    });
+    expect(() =>
+      ReactDOM.render(<Foo foo="foo" />, document.createElement('div')),
+    ).toWarnDev(
+      'Component: getDerivedStateFromCatch() is defined as an instance method ' +
+        'and will be ignored. Instead, declare it as a static method.',
+    );
+  });
+
   it('should warn if state is not properly initialized before getDerivedStateFromProps', () => {
     const Component = createReactClass({
       statics: {