Replace componentWillReceiveProps with componentDidUpdate

README.md

@@ -71,7 +71,8 @@ autocomplete( event ) {
 ```javascript
 @keydown
 class MyComponent extends React.Component {
-  componentWillReceiveProps( { keydown } ) {
+  componentDidUpdate() {
+    const { keydown } = this.props;
     if ( keydown.event ) {
       // inspect the keydown event and decide what to do
       console.log( keydown.event.which );
@@ -115,7 +116,7 @@ class MyComponent extends React.Component {
 
 class MyOtherComponent extends React.Component {
   ...
-  @keydownScoped( 'enter' ) // inspects nextProps.keydown.event in componentWillReceiveProps behind the scenes
+  @keydownScoped( 'enter' ) // inspects this.props.keydown.event in componentDidUpdate behind the scenes
   submit() {
     // submit
   }

example/src/app/class_decorator/code.js

@@ -16,8 +16,8 @@ class MyComponent extends React.Component {
     };
   }
 
-  componentWillReceiveProps( nextProps ) {
-    const { keydown: { event } } = nextProps;
+  componentDidUpdate() {
+    const { keydown: { event } } = this.props;
     if ( event ) {
       this.setState( { key: event.which } );
     }

example/src/app/class_decorator/index.js

@@ -11,7 +11,8 @@ class MyComponent extends React.Component {
     };
   }
 
-  componentWillReceiveProps( { keydown: { event } } ) {
+  componentDidUpdate() {
+    const { keydown: { event } } = this.props;
     if ( event ) {
       this.setState( { key: event.which } );
     }

src/decorators/method_decorator_scoped.js

@@ -16,7 +16,7 @@ import parseKeys from '../lib/parse_keys';
  * @return {object} The method's descriptor object
  */
 function methodWrapperScoped( { target, descriptor, keys } ) {
-  const { componentWillReceiveProps } = target;
+  const { componentDidUpdate } = target;
   const fn = descriptor.value;
   if ( !keys ) {
     console.warn( `${fn}: keydownScoped requires one or more keys` );
@@ -46,15 +46,15 @@ function methodWrapperScoped( { target, descriptor, keys } ) {
     // from the wrapped/scoped component up the view hierarchy. if new keydown
     // event has arrived and the key codes match what was specified in the
     // decorator, call the wrapped method.
-    target.componentWillReceiveProps = function( nextProps, ...args ) {
-      const { keydown: keydownNext } = nextProps;
-      const { keydown: keydownThis } = this.props;
+    target.componentDidUpdate = function( prevProps, ...args ) {
+      const { keydown: keydownNext } = this.props;
+      const { keydown: keydownThis } = prevProps;
 
       if ( _shouldTrigger( keydownThis, keydownNext ) ) {
         return fn.call( this, keydownNext.event );
       }
 
-      if ( componentWillReceiveProps ) return componentWillReceiveProps.call( this, nextProps, ...args );
+      if ( componentDidUpdate ) return componentDidUpdate.call( this, prevProps, ...args );
     };
   }