Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.