deferComponentRender.js

import hoistStatics from 'hoist-non-react-statics';
import React from 'react';

/**
 * Allows two animation frames to complete to allow other components to update
 * and re-render before mounting and rendering an expensive `WrappedComponent`.
 */
export default function deferComponentRender(WrappedComponent) {
  class DeferredRenderWrapper extends React.Component {
    constructor(props, context) {
      super(props, context);
      this.state = { shouldRender: false };
    }

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

    render() {
      return this.state.shouldRender ? <WrappedComponent {...this.props} /> : null;
    }
  }

  return hoistStatics(DeferredRenderWrapper, WrappedComponent);
}

Thanks for this! Deferred rendering is very important in many cases, but not always intuitive as to what needs to be done to achieve the best UX. Do you mind explaining the significance of using hoist-non-react-statics and this double requestAnimationFrame trick?

@ConAntonakos Maybe my answer comes too late, but hoist-non-react-statics takes any static methods and properties that you may have put on your component, and they are not set by React itself, and copies them (hoists them) on the wrapper component returned by the HOC.