ReactJS getSnapshotBeforeUpdate() Method
Last Updated :
23 Dec, 2020
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 {
state = {
name: 'GFG' ,
};
componentDidMount() {
setTimeout(() => {
this .setState({ name: 'GeeksForGeeks' });
}, 1000);
}
getSnapshotBeforeUpdate(prevProps, prevState) {
document.getElementById( 'prev' ).innerHTML =
'Previous Name: ' + prevState.name;
}
componentDidUpdate() {
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
Share your thoughts in the comments
Please Login to comment...