Skip to content

Instantly share code, notes, and snippets.

@chee
Forked from sieverk/deferComponentRender.js
Last active April 12, 2017 18:27
Show Gist options
  • Save chee/e0605c2bb4bb4be823dde26206d96946 to your computer and use it in GitHub Desktop.
Save chee/e0605c2bb4bb4be823dde26206d96946 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: 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