ReactJS - UNSAFE_componentWillUpdate() Method

---

---

In web development, UNSAFE_componentWillUpdate() functions as a warning. It occurs just when we are going to make modifications to a section of a website.

Remember that this warning shows only when we update anything, not when we first create it. So, UNSAFE_componentWillUpdate() acts as a warning, helping us in detecting problems when making updates to a website.

Syntax

 UNSAFE_componentWillUpdate(nextProps, nextState) 

Parameters

This method accepts two parameters: nextProps and nextState.

• nextProps − These are the new characteristics (like information) that our web component will be given. It is just like getting a fresh set of instructions.

• nextState − This reflects the new state of our component. It is similar to being aware of the current situation.

Return Value

UNSAFE_componentWillUpdate() returns no results. It is more of a starting point before making changes, so it doesn't provide a result or answer.

Examples

Example 1

In this example, we will use the UNSAFE_componentWillUpdate() function in a React app to create a simple example.

We will have a basic React component called App. It will let us change the background color of the page by clicking buttons. The UNSAFE_componentWillUpdate() function will detect changes in the background color and adjust the page's background color accordingly.

 import React, { Component } from 'react'; class App extends Component { constructor(props) { super(props); this.state = { backgroundColor: 'white', }; } // This is the UNSAFE_componentWillUpdate() function. UNSAFE_componentWillUpdate(nextProps, nextState) { if (nextState.backgroundColor !== this.state.backgroundColor) { document.body.style.backgroundColor = nextState.backgroundColor; } } handleChangeColor = (color) => { this.setState({ backgroundColor: color }); } render() { return ( <div> <h1>Color Change App</h1> <button onClick={() => this.handleChangeColor('red')}>Change to Red</button> <button onClick={() => this.handleChangeColor('blue')}>Change to Blue</button> <button onClick={() => this.handleChangeColor('green')}>Change to Green</button> </div> ); } } export default App; 

Output

Example 2

In this example we will use the UNSAFE_componentWillUpdate() function to update the temperature from celsius to fahrenheit. We can enter a temperature in either Celsius or Fahrenheit, and the program will adjust the other temperature value right away. If we enter a temperature in Celsius, for example, the app will display the comparable temperature in Fahrenheit, and vice versa. When we enter a new temperature, it handles the conversions using the UNSAFE_componentWillUpdate() method.

So below is the code for the same −

 // TempConverterApp.js import React, { Component } from 'react'; import './App.css'; class TempConverterApp extends Component { constructor(props) { super(props); this.state = { celsius: 0, fahrenheit: 32, }; } // Usage of UNSAFE_componentWillUpdate() to update the temperature values UNSAFE_componentWillUpdate(nextProps, nextState) { if (nextState.celsius !== this.state.celsius) { // Convert Celsius to Fahrenheit nextState.fahrenheit = (nextState.celsius * 9) / 5 + 32; } else if (nextState.fahrenheit !== this.state.fahrenheit) { // Convert Fahrenheit to Celsius nextState.celsius = ((nextState.fahrenheit - 32) * 5) / 9; } } handleChangeCelsius = (value) => { this.setState({ celsius: value }); }; handleChangeFahrenheit = (value) => { this.setState({ fahrenheit: value }); }; render() { return ( <div className='App'> <h1>Temperature Converter</h1> <label> Celsius: <input type="number" value={this.state.celsius} onChange={(e) => this.handleChangeCelsius(e.target.value)} /> </label> <br /> <label> Fahrenheit: <input type="number" value={this.state.fahrenheit} onChange={(e) => this.handleChangeFahrenheit(e.target.value)} /> </label> </div> ); } } export default TempConverterApp; 

Output

Normal: For normal text.

Example 3

This application is a simple counter app that can count up and down. There are two buttons: one to increase the count and one to decrease it. The program will also tell us if the current count is even or odd. It updates a message based on whether the count is even or odd by calling the UNSAFE_componentWillUpdate() method. If we have an even number, it will read "Even Count," and if we have an odd number, it will say "Odd Count."

So the code for this application is as follows −

 // CounterApp.js import React, { Component } from 'react'; import './App.css'; class CounterApp extends Component { constructor(props) { super(props); this.state = { count: 0, message: '', }; } // Usage of UNSAFE_componentWillUpdate() to update the message based on the count value UNSAFE_componentWillUpdate(nextProps, nextState) { if (nextState.count !== this.state.count) { nextState.message = nextState.count % 2 === 0 ? 'Even Count' : 'Odd Count'; } } handleIncrement = () => { this.setState((prevState) => ({ count: prevState.count + 1 })); }; handleDecrement = () => { this.setState((prevState) => ({ count: prevState.count - 1 })); }; render() { return ( <div className='App'> <h1>Counter App</h1> <p>{this.state.message}</p> <button onClick={this.handleIncrement}>Increment</button> <button onClick={this.handleDecrement}>Decrement</button> <p>Count: {this.state.count}</p> </div> ); } } export default CounterApp; 

Output

Note

So we can see in the output image as shown above, there are two buttons available: one for Increment and the other one is for Decrement. And the message shown as per the even and odd counts.

Summary

UNSAFE_componentWillUpdate() is a React function that is used shortly before a component updates and re-renders. It gives us the chance to get ready for the future changes.