ReactJS UNSAFE_componentWillReceiveProps() Method - GeeksforGeeks

31 Mar, 2021
The componentWillReceiveProps() is invoked before our mounted React component receives new props. It is called during the updating phase of the React Life-cycle. It is used to update the state in response to some changes in our props. We can’t call this with initial props during mounting because React calls this method only when our component’s props have updated.
The componentWillReceiveProps() method has been deprecated in the latest releases of React as per this issue. It is recommended to use getDerivedStateFromProps() method in its place but if we still want to use componentWillReceiveProps() we can do it by calling it as UNSAFE_componentWillReceiveProps(). It’s not suggested to use this method according to React, that’s why UNSAFE keyword comes at the beginning to give a gentle message to all the React developers to stop using this method. This method can be used when the state of a component depends upon the changes in props.
Syntax:
class App extends Component {
  UNSAFE_componentWillReceiveProps(newProps) {
    // Action you want to execute
  }
}
Parameters: It accepts one parameter, it is newProps which is the updated value of props after the component gets rendered in the DOM.
Creating React Application:
Step 1: Create a React application using the following command:npx create-react-app foldername
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:cd foldername
cd foldername
Project Structure: It will look like the following.
Example: In this example, we are going to build an application that logs the updated prop value on the console. Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
App.js
import React from 'react'  class App extends React.Component {    constructor(props) {     super(props)       // Set initial state     this.state = {        count: 0     }       // Binding this keyword     this.handleCount = this.handleCount.bind(this)  };    handleCount() {    // Updating state     this.setState({       count: this.state.count + 1     })  }    render() {     return (        // Passing state as props        <div>           <button onClick =               {this.handleCount}>Increase me!           </button>           <PropComponent data = {this.state.count} />        </div>     );  }}  class PropComponent extends React.Component {    UNSAFE_componentWillReceiveProps(newProps) {       // Performing an action       console.log('Component is receiving new props', newProps);  }    render() {     return (          // Printing updated props value        <div>          <h1>My value is {this.props.data}</h1>        </div>     );  }}  export default App;
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Explanation: We create a state of the count with an initial value of 0 and a function handleCount for incrementing its current value by 1 in our App class component. The latter gets triggered as an onClick event when we click on our button element. Our state value increments when we click on the button and this updated value is passed as props to another class component PropComponent. Before our PropComponent receives new props, it logs the updated props values on the console through UNSAFE_componentWillReceiveProps(newProps) method. This way, we can perform any action just before a component receives new props. 
A warning message also appears at the top of the console when our component loads which clearly tells us that this method is not recommended for the use which we already discussed above.
Picked
React.js-Methods
ReactJS-Basics
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to navigate on path by button click in react router ?
How to create a table in ReactJS ?
How to check the version of ReactJS ?
Explain the purpose of render() in ReactJS
How to set background images in ReactJS ?
Express.js express.Router() Function
How to set input type date in dd-mm-yyyy format using HTML ?
Installation of Node.js on Linux
Differences between Functional Components and Class Components in React
How to create footer to stay at the bottom of a Web page?