maintainScrollReactComponent.jsx

componentWillReceiveProps() {
  // before the new props come in, save the current scroll position
  const ele = $(this._container);
  const distanceFromBottom = ele[0].scrollHeight - ele.scrollTop() - ele.outerHeight();
  
  this.setState({
    distanceFromBottom,
  });
}

componentDidUpdate() {
  const ele = $(this._container);
  // setting scrollTop is how we can programatically change the scroll position of a div
  // in order to find out what value to use, we rearrange the above equation to isolate for scrollTop
  const targetScrollTopValue = ele[0].scrollHeight - ele.outerHeight() - this.state.distanceFromBottom;
  ele.scrollTop(targetScrollTopValue);  // set the scrollTop value
}