props-did-change

Additional react lifecycle hook called when component is mounted or component's props are changed. Works both with typescript and javascript.

Useful when you want to sync some data with an API on both componentDidMount and componentDidUpdate lifecycle hooks.

Installation

npm install props-did-change

Typescript Example

1import propsDidChange from 'props-did-change';
2import * as React from 'react';
3
4export class CountPrinter extends React.Component<{
5  count: number;
6}> {
7  @propsDidChange
8  public propsDidChange(prevProps: any, type: string) {
9    console.log('prevProps', prevProps); // prints old props on update or null on mount
10    console.log('this.props', this.props); // prints current props
11    console.log('props change type', type) // prints 'componentDidMount' or 'componentDidUpdate'
12
13    /* ...
14       you can initiate your API calls here
15       ...
16     */
17  }
18
19  public render() {
20    return this.props.count;
21  }
22}

Interoperation with existing componentDidMount and componentDidUpdate

If you implement your own componentDidMount and componentDidUpdate, they will be called and awaited before propsDidChange method is called.

Note

You can name your new lifecycle method whatever you want, you just have to decorate it with @propsDidChange.