Skip to content
Related Articles

Related Articles

Improve Article

ReactJS UNSAFE_componentWillUpdate() Method

  • Difficulty Level : Medium
  • Last Updated : 25 Mar, 2021

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 content has been updated through UNSAFE_componentWillUpdate() method and 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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :