El método getSnapshotBeforeUpdate() se invoca justo antes de que se represente el DOM. Se utiliza para almacenar los valores anteriores del estado después de que se actualice el DOM.
Cualquier valor devuelto por el método getSnapshotBeforeUpdate() se utilizará como parámetro para el método componentDidUpdate(). Esta función siempre se usa junto con el método componentDidUpdate() pero viceversa no es cierto.
Sintaxis:
getSnapshotBeforeUpdate(prevProps, prevState)
Parámetros: Acepta dos parámetros, son prevProps y prevState los cuales
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
Ejemplo: Programa para demostrar el uso del método getSnapshotBeforeUpdate(). Aquí, vamos a usar los valores anterior y actual del estado para mostrar algo de texto.
Nombre de archivo: App.js:
Javascript
import React from 'react';
class App extends React.Component {
// Initializing the state
state = {
name: 'GFG',
};
componentDidMount() {
// Changing the state after 1 sec
setTimeout(() => {
this.setState({ name: 'GeeksForGeeks' });
}, 1000);
}
getSnapshotBeforeUpdate(prevProps, prevState) {
// Displaying the previous value of the state
document.getElementById('prev').innerHTML =
'Previous Name: ' + prevState.name;
}
componentDidUpdate() {
// Displaying the current value of the state
document.getElementById('new').innerHTML =
'Current Name: ' + this.state.name;
}
render() {
return (
<div>
<div id="prev"></div>
<div id="new"></div>
</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
Producción:
Referencia: https://reactjs.org/docs/react-component.html#getsnapshotbeforeupdate