Last active
October 13, 2020 15:53
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@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.