[React] Capture values using the lifecycle hook getSnapshotBeforeUpdate in React 16.3

getSnapshotBeforeUpdate is a lifecycle hook that was introduced with React 16.3. It is invoked right before the most recently rendered output is committed and the value returned by it will be passed as a third parameter to componentDidUpdate. It enables your component to capture current values for example a scroll position before they are potentially changed.

import React, { Component } from "react";

class Chat extends Component {
  wrapperRef = React.createRef();

  componentDidMount() {
    this.wrapperRef.current.scrollTop = this.wrapperRef.current.scrollHeight;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    const wrapper = this.wrapperRef.current;
    return wrapper.scrollTop + wrapper.offsetHeight >= wrapper.scrollHeight;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot) {
      this.wrapperRef.current.scrollTop = this.wrapperRef.current.scrollHeight;
    }
  }

  render() {
    return (
      <div
        style={{
          height: 200,
          overflowY: "scroll",
          border: "1px solid #ccc"
        }}
        ref={this.wrapperRef}
        children={this.props.children}
      >
        {this.props.children}
      </div>
    );
  }
}

export default Chat;