getSnapshotBeforeUpdate

The getSnapshotBeforeUpdate method is part of the React component lifecycle and is invoked just before the DOM updates are applied. It receives the previous props and state as arguments and should return a snapshot value that React will pass as the third argument to componentDidUpdate. This snapshot is typically used to preserve information from the DOM that must be retained across a re-render, such as scroll positions, measurements or any other transient state derived from the current DOM.

A typical pattern involves measuring elements in getSnapshotBeforeUpdate and then using the snapshot in componentDidUpdate to restore those measurements. For example, a scrolling component might capture the scroll position before an update and then scroll back to the same position afterward. If no snapshot is needed, the method may simply return null.

React guarantees that getSnapshotBeforeUpdate is only called for components that implement it, and it is only called when there are pending DOM updates. The method is part of the now legacy lifecycle and is designed to reduce the time window where layout information could be lost. The snapshot value is stored by React and delivered immutably to componentDidUpdate, ensuring a synchronous, reliable flow between the two lifecycle methods.

This method was introduced to replace former techniques that relied on componentDidUpdate alone for handling scroll restoration and similar tasks, offering a more predictable and performance-friendly solution.