deffered render

def.js

class DeferredRender extends Component {
  static defaultProps = {
    countByStep: 100,
  };

  state = { rendered: 0 };

  componentDidMount() {
    this.nextStep();
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.children.length !== this.props.children.length) {
      this.setState({ rendered: 0 });
    }
  }

  componentDidUpdate() {
    this.nextStep();
  }

  nextStep() {
    const { rendered } = this.state;
    const { children, countByStep } = this.props;

    if (children.length > rendered + countByStep) {
      requestAnimationFrame(() => {
        this.setState(state => ({
          rendered: state.rendered + countByStep,
        }));
      });
    }
  }

  render() {
    const { rendered } = this.state;
    const { children, countByStep } = this.props;

    if (children < countByStep) {
      return <Deferred>{children}</Deferred>;
    }

    return <Deferred>{children.slice(0, rendered + countByStep)}</Deferred>;
  }
}