Hook equivalent for `getSnapshotBeforeUpdate`

Do you want to request a feature or report a bug?

Feature

What is the current behavior?

There is no hook based equivalent for getSnapshotBeforeUpdate. The docs state:

Our goal is for Hooks to cover all use cases for classes as soon as possible. There are no Hook equivalents to the uncommon getSnapshotBeforeUpdate and componentDidCatch lifecycles yet, but we plan to add them soon.

What is the expected behavior?

There is a hook based equivalent for getSnapshotBeforeUpdate, maybe something like:

function ScrollingList(props) {
  const lengthRef = React.useRef(0);
  const listRef = React.useRef(null);

  const prevHeight = React.useSnapshot(() => {
    if (lengthRef.current < props.list.length) {
      const list = listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
  }); 

  React.useEffect(() => {
    lengthRef.current = props.list.length;
  }, [props.list.length]);

  React.useEffect(() => {
    if (prevHeight != null) {
      const list = listRef.current;
      list.scrollTop = list.scrollHeight - prevHeight;
    }
  }, [prevHeight]);
  return (
    <div ref={listRef}>{/* ... */}</div>
  );
}

This code probably is bug-ridden and not the best use of hooks but you get the idea.

I’d like to know:

1. If this feature is planned or on the roadmap.
2. What the proposed API will be.
3. If anyone is working on this.

Sorry, if this is being tracked somewhere and I haven’t seen it. I’m planning an intense component which will use getSnapshotBeforeUpdate and I’d love some guidance about the future of this lifecycle method.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React v16.8.0 and later. All browsers and OSes.

[mattgperry]

What’s the current thinking on this? Layout animations are impossible to perform with hooks without this.

[aweary]

Re-opening as it’s still an active feature request