jacob-beltran · April 12, 2017 16:57 · Apr 6, 2017
diff --git a/deferComponentRender.js b/deferComponentRender.js
@@ -0,0 +1,27 @@
+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: true };
+    }
+
+    componentDidMount() {
+      window.requestAnimationFrame(() => {
+        window.requestAnimationFrame(() => this.setState({ shouldRender: true }));
+      });
+    }
+
+    render() {
+      return this.state.shouldRender ? <WrappedComponent {...this.props} /> : null;
+    }
+  }
+
+  return hoistStatics(DeferredRenderWrapper, WrappedComponent);
+}