With the release of 16.3, some new methods have been introduced, and release of React 17 will deprecate some lifecycle method. React lifecycle is one of those newly introduced lifecycle method replacing , which has now become . getDerivedStateFromProps componentWillReceiveProps UNSAFE_componentWillReceiveProps is a static method which is invoked after a component is instantiated as well as when it receives new props. Since it is a static method, you cannot access inside this method neither you can access any other class method. Unlike you cannot set state inside this method, so the only way to update state is returning an object. If you don’t want to update any state, simply return . getDerivedStateFromProps this componentWillReceiveProps null Let’s dive into some code This is how works. componentWillReceiveProps componentWillReceiveProps(nextProps){ (nextProps.someValue!== .props.someValue){ .setState({ : someValue }); .classMethod(); } } if this //Perform some operation this someState this View on Github We compare with and if both are different then we perform some operation, and call . nextProps.someValue this.props.someValue setState this.classMethod(); Now let’s have a look how works. getDerivedStateFromProps getDerivedStateFromProps(nextProps, prevState){ (nextProps.someValue!==prevState.someValue){ { : nextProps.someValue}; } ; } componentDidUpdate(prevProps, prevState) { (prevProps.someValue!== .props.someValue){ .setState({ : someValue}); .classMethod(); } } static if return someState else return null if this //Perform some operation here this someState this View on Github It receives two params and . As mentioned previously you cannot access inside this method so you’ll have to store the props in the state to compare the with previous props. In above code and are compared, if both are different then an object will be returned to update the state otherwise will be returned indicating state update not required. If state changes then is called where we can perform the desired operations as we did in . nextProps prevState this nextProps nextProps prevState null componentDidUpdate componentWillReceiveProps Let’s make it more clear using an example Let’s say we’re getting some data from firebase and displaying it in the form of stats. Here’s the code for the same. React, {PureComponent} ; DisplayStat { (){ (); .state={ : } } changePath= { .setState({ : }); } render(){ ( <DisplayStat path={this.state.path} /> <div onClick={this.changePath} >Change Path</div> </div> import from "react" import from "./displayStat.js" class App extends PureComponent constructor super this path "path-1" => () this path "path-2" return < > div ) } } React, {PureComponent} ; { (props){ (); .state={ : firebase.database().ref( .props.path); } } componentDidMount() { .getData( .state.firebaseRef); } componentWillReceiveProps(nextProps){ (nextProps.path!== .props.path){ {firebaseRef}= .state; firebaseRef.off( ); firebaseRef=firebase.database().ref(nextProps.path); .setState({firebaseRef, :nextProps.path }); .getData(firebaseRef); } } getData= { ref.on( , snapshot => { }); } render(){ ( ); } } import from "react" class DisplayStat extends PureComponent constructor super this firebaseRef this this this if this let this "value" //Turn off the connection to previous path. this path this ( )=> ref // open connection and listen to firebase path "value" //Perform some operation return //Display Stats < > div </ > div View on Github The above example uses . Initially, the component will listen to firebase on , when a user clicks on the Change Path button the state will change in the file and will be called in the file. The previous connection to firebase path will be closed, and a new will get created. Notice we’re passing firebase reference as parameters to to listen to firebase. componentWillReceiveProps displayStat.js path-1 App.js componentWillReceiveProps displayStat.js getDate() Now let’s do the same thing using . getDerivedStateFromProps React, {PureComponent} ; { (props){ (); .state={ : .props.path, : firebase.database().ref( .props.path); } } componentDidMount() { .getData( .state.firebaseRef); } componentDidUpdate(prevProps, prevState) { (prevState.path !== .state.path) { firebaseRef=firebase.database().ref( .state.path); .setState({firebaseRef}); .getData(firebaseRef); } } getDerivedStateFromProps(nextProps, prevState){ (nextProps.path!==prevState.path){ firebaseRef=prevState.firebaseRef; firebaseRef.off( ); { : nextProps.path}; } ; } getData= { ref.on( , snapshot => { }); } render(){ ( ); } } import from "react" class DisplayStat extends PureComponent constructor super this path this firebaseRef this this this if this let this this this static if let "value" //Turn off the connection to previous path. // We can't do this here as we can't access `this` inside this method. // firebaseRef=firebase.database().ref(nextProps.path); // this.setState({firebaseRef, path :nextProps.path }); // this.getData(firebaseRef); return path else return null ( )=> ref // open connection and listen to firebase path "value" //Perform some operation return //Display Stats < > div </ > div View on Github Notice an object is being returned in the to update the state and no class method is being called. We’re using to check if a path is changed or not and accordingly create a new firebase connection and listen to new path. getDerivedStateFromProps componentDidUpdate Thanks for reading this article. Please hit the Clap button if you like it. Connect with me on . You can also follow me on , , and . LinkedIn Twitter Quora GitHub
