Feed.jsx

import React, { Component } from 'react';
import styles from './feed.scss';

type Props = {
  data: Array<{ id: string }>,
  threshold: number,
  children: (item: { id: string }, index: number) => React.Element<any>,
};

export default class Feed extends Component {
  props: Props;

  static defaultProps = {
    data: [],
    threshold: 1000,
    children: () => null,
  };

  componentDidUpdate({ data }) {
    if (this.shouldScroll(data)) {
      this.scrollToBottom();
    }
  }

  shouldScroll(prevData) {
    const { data, threshold } = this.props;
    if (this.getScrollFromBottom() > threshold) {
      return false;
    }
    if (data.length === prevData.length) {
      return false;
    }
    return data.every(({ id }) => prevData.find(({ id: prevId }) => id === prevId);
  }

  scrollToBottom() {
    this.container.scrollTop = this.container.scrollHeight;
  }
    
  getScrollFromBottom() {
    const { scrollTop, scrollHeight, offsetHeight } = this.container;
    return scrollHeight - (scrollTop + offsetHeight);
  }

  container = null;

  render() {
    const { children, data } = this.props;
    
    return (
      <div
        className={styles.container}
        ref={el => { this.container = el; }}
      >
        {data.map(children)}
      </div>
    );
  }
}