ReactJS UNSAFE_componentWillReceiveProps() Method

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 2: After creating your project folder i.e. foldername, move to it using the following command:

  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.