Método ReactJS UNSAFE_componentWillUpdate()

El método componentWillUpdate() nos proporciona el control para manipular nuestro componente React justo antes de que reciba nuevas propiedades o valores de estado. Se llama justo antes de la representación de nuestro componente durante la fase de actualización del ciclo de vida de React , es decir, este método se activa después de la actualización de State o Props y justo antes de la ejecución de la función render().

El método componentWillUpdate() ha quedado obsoleto en las últimas versiones de React según este problema . Se sugiere usar el método getSnapshotBeforeUpdate() como alternativa, pero si aún queremos usar componentWillUpdate(), podemos hacerlo llamándolo UNSAFE_componentWillUpdate() . No se recomienda usar este método de acuerdo con React, es por eso que la palabra clave UNSAFE aparece al principio para enviar un mensaje amable a todos los desarrolladores de React para que dejen de usar este método. Este método se puede utilizar para realizar una acción sobre la base del valor de estado/prop actualizado.

Sintaxis:

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

Parámetros: Acepta dos parámetros, son Props y State, que son los valores actualizados de props o state antes de que se vuelva a renderizar el componente.

Creando la aplicación React:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

  cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: en este ejemplo, vamos a crear una aplicación que imprima un mensaje en la consola cuando se actualice el valor del estado.

App.js: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

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;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Explicación: recibimos un mensaje de alerta de que nuestro contenido de estado se actualizó a través del método UNSAFE_componentWillUpdate() y luego nuestro componente se vuelve a representar y nos muestra el valor de estado actualizado (estamos imprimiendo ese valor a través del método render()). De esta forma, podemos realizar cualquier acción en la que necesitemos el valor de estado/prop actualizado justo antes de volver a renderizar nuestro componente. Como puede ver, también aparece un mensaje de advertencia en la consola que indica claramente que no se recomienda el uso de este método que ya discutimos anteriormente.