Skip to content

Instantly share code, notes, and snippets.

Embed
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: false };
}
componentDidMount() {
window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => this.setState({ shouldRender: true }));
});
}
render() {
return this.state.shouldRender ? <WrappedComponent {...this.props} /> : null;
}
}
return hoistStatics(DeferredRenderWrapper, WrappedComponent);
}
@mkarajohn
Copy link

mkarajohn commented Jun 28, 2018

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment