Warn about UNSAFE_componentWillRecieveProps misspelling

Author: bvaughn

packages/react-reconciler/src/ReactFiberClassComponent.js

@@ -330,6 +330,14 @@ export default function(
           'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?',
         name,
       );
+      const noUnsafeComponentWillRecieveProps =
+        typeof instance.UNSAFE_componentWillRecieveProps !== 'function';
+      warning(
+        noUnsafeComponentWillRecieveProps,
+        '%s has a method called ' +
+          'UNSAFE_componentWillRecieveProps(). Did you mean UNSAFE_componentWillReceiveProps()?',
+        name,
+      );
       const hasMutatedProps = instance.props !== workInProgress.pendingProps;
       warning(
         instance.props === undefined || !hasMutatedProps,

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

@@ -410,6 +410,23 @@ describe 'ReactCoffeeScriptClass', ->
     )
     undefined
 
+  it 'should warn when misspelling UNSAFE_componentWillReceiveProps', ->
+    class NamedComponent extends React.Component
+      UNSAFE_componentWillRecieveProps: ->
+        false
+
+      render: ->
+        span
+          className: 'foo'
+
+    expect(->
+      test React.createElement(NamedComponent), 'SPAN', 'foo'
+    ).toWarnDev(
+      'Warning: NamedComponent has a method called UNSAFE_componentWillRecieveProps().
+       Did you mean UNSAFE_componentWillReceiveProps()?'
+    )
+    undefined
+
   it 'should throw AND warn when trying to access classic APIs', ->
     instance =
       test Inner(name: 'foo'), 'DIV', 'foo'

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

@@ -433,6 +433,23 @@ describe('ReactES6Class', () => {
     );
   });
 
+  it('should warn when misspelling UNSAFE_componentWillReceiveProps', () => {
+    class NamedComponent extends React.Component {
+      UNSAFE_componentWillRecieveProps() {
+        return false;
+      }
+      render() {
+        return <span className="foo" />;
+      }
+    }
+
+    expect(() => test(<NamedComponent />, 'SPAN', 'foo')).toWarnDev(
+      'Warning: ' +
+        'NamedComponent has a method called UNSAFE_componentWillRecieveProps(). ' +
+        'Did you mean UNSAFE_componentWillReceiveProps()?',
+    );
+  });
+
   it('should throw AND warn when trying to access classic APIs', () => {
     const instance = test(<Inner name="foo" />, 'DIV', 'foo');
     expect(() =>

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

@@ -273,6 +273,16 @@ class MisspelledComponent2 extends React.Component {
   }
 }
 
+// it should warn when misspelling UNSAFE_componentWillReceiveProps
+class MisspelledComponent3 extends React.Component {
+  UNSAFE_componentWillRecieveProps() {
+    return false;
+  }
+  render() {
+    return React.createElement('span', {className: 'foo'});
+  }
+}
+
 // it supports this.context passed via getChildContext
 class ReadContext extends React.Component {
   static contextTypes = {bar: PropTypes.string};
@@ -537,6 +547,16 @@ describe('ReactTypeScriptClass', function() {
     );
   });
 
+  it('should warn when misspelling UNSAFE_componentWillReceiveProps', function() {
+    expect(() =>
+      test(React.createElement(MisspelledComponent3), 'SPAN', 'foo')
+    ).toWarnDev(
+      'Warning: ' +
+        'MisspelledComponent3 has a method called UNSAFE_componentWillRecieveProps(). ' +
+        'Did you mean UNSAFE_componentWillReceiveProps()?'
+    );
+  });
+
   it('should throw AND warn when trying to access classic APIs', function() {
     const instance = test(
       React.createElement(Inner, {name: 'foo'}),