ReactJS getSnapshotBeforeUpdate() Method
The getSnapshotBeforeUpdate() method is invoked just before the DOM is being rendered. It is used to store the previous values of the state after the DOM is updated.
Any value returned by getSnapshotBeforeUpdate() method will be used as a parameter for componentDidUpdate() method. This function is always used along with the componentDidUpdate() method but vice-versa isnât true.
Syntax:
getSnapshotBeforeUpdate(prevProps, prevState)
Parameters: It accepts two parameters, they are prevProps and prevState which are just the props or state before the component in question 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
Example: Program to demonstrate the use of getSnapshotBeforeUpdate() method. Here, we are going to use the previous and current values of the state to display some text.
Filename: 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: 'w3wiki' }); }, 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; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output:
Reference: https://reactjs.org/docs/react-component.html#getsnapshotbeforeupdate
Contact Us