Assists react in mounting/unmounting large component trees. Originally inspired by mobile twitter.

Deferred-Rendering-HOC.js

import React, { Component } from 'react';

const withDeferRender = Presentational =>
  class DeferRender extends Component {
    state = {
      shouldRender: false,
    };

    componentDidMount() {
      window.requestAnimationFrame(() => {
        window.requestAnimationFrame(() =>
          this.setState(() => ({ shouldRender: true })));
      });
    }

    render() {
      if (!this.state.shouldRender) return null;
      return <Presentational {...this.props} />;
    }
  };

export default withDeferRender;

This is great, however if the component unmounts between animation frames, setState will throw for firing against a removed component. Ensures extra safety against a component unmounting quickly in a transition for example.

  componentDidMount() {
    this.raf = window.requestAnimationFrame(() => {
      this.recursiveRaf = window.requestAnimationFrame(() => this.setState({ mounting: false }));
    });
  }

  componentWillUnmount() {
    window.cancelAnimationFrame(this.raf);
    window.cancelAnimationFrame(this.recursiveRaf);
  }

@jsvg Good catch, but I think storing both the rAF tokens is an overkill because the requests would never coexist, here is how it should be :

componentDidMount() {
  this.raf = window.requestAnimationFrame(() => {
    // at this point the first request has been fulfilled
    // let's reuse the same class property to store the second token
    this.raf = window.requestAnimationFrame(() => this.setState({ mounting: false }));
  });
}

componentWillUnmount() {
  window.cancelAnimationFrame(this.raf);
}