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.
