Learn React with TypeScript 3

getSnapshotBeforeUpdate and componentDidUpdate

getSnapshotBeforeUpdate is called just before the DOM is updated. The value that is returned from getSnapshotBeforeUpdate is passed on to componentDidUpdate.

componentDidUpdate is called as soon as the DOM is updated. Resizing the window during rendering is an example of when getSnapshotBeforeUpdate can be useful.

Let's have a look at these life cycle methods in our app:

1. Let's add the following near the top of the App class, under the timer variable declaration:

private renderCount = 0;

2. Now, let's add the life cycle methods:

public getSnapshotBeforeUpdate(prevProps: {}, prevState: IState) {  this.renderCount += 1;  console.log("getSnapshotBeforeUpdate", prevProps, prevState, { renderCount: ...