ReactJS UNSAFE_componentWillReceiveProps() Method (original) (raw)

Last Updated : 26 Jul, 2024

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

Increase me!

); } }

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.