Skip to content

Instantly share code, notes, and snippets.

@jacob-beltran
Forked from sieverk/deferComponentRender.js
Created April 12, 2017 16:57
Show Gist options
  • Save jacob-beltran/efc9633cafb606c43e125c77a2669b10 to your computer and use it in GitHub Desktop.
Save jacob-beltran/efc9633cafb606c43e125c77a2669b10 to your computer and use it in GitHub Desktop.
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