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