ReactJS UNSAFE_componentWillUpdate() Method (original) (raw)

Last Updated : 25 Jul, 2024

The **componentWillUpdate() method provides us the control to manipulate our React component just before it receives new props or state values. It is called just before the rendering of our component during the updating phase of the **React Life-cycle ,i.e., this method gets triggered after the updation of State or Props and just before the execution of render() function.

The componentWillUpdate() method has been deprecated in the latest releases of React as per this **issue. It is suggested to use **getSnapshotBeforeUpdate() method as its alternative but if we still want to use componentWillUpdate() we can do it by calling it as **UNSAFE_componentWillUpdate(). It's not recommended to use this method according to React, that's why **UNSAFE keyword comes at the beginning to give a gentle message to all React developers to stop using this method. This method can be used to perform an action on the basis of the updated state/prop value.

**Syntax:

class App extends Component {
UNSAFE_componentWillUpdate(Props, State) {
// Action you want to execute
}
}

**Parameters: It accepts two parameters, they are **Props and **State which are the updated values of props or state before the component is re-rendered.

**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 prints a message on the console when the state value gets updated.

**App.js: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

JavaScript ``

import React from 'react'; class App extends React.Component {

// Initializing the state state = { content: '', };

componentDidMount() {

  // Updating the state
  this.setState({
     content: 'GeeksForGeeks'
  })

}

UNSAFE_componentWillUpdate(Props, State) {

// Performing an action
alert(`Your state value has changed to ${State.content}`);

}

render() { return (

  // Printing the state value
  <div> 
    <h1>State value is {this.state.content}</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 receive an alert message that our state contenthas been updated through UNSAFE_componentWillUpdate() methodand then our component re-renders and shows us the updated state value (we are printing that value through render() method). This way, we can perform any action in which we require the updated state/prop value just before the re-rendering of our component. As you can see a warning message also appears at the console which clearly tells that this method is not recommended for use which we already discussed above.