Created
April 18, 2017 13:38
-
-
Save derek-duncan/a71a8c3f6bade9a4a5c988acb13d7c06 to your computer and use it in GitHub Desktop.
Assists react in mounting/unmounting large component trees. Originally inspired by mobile twitter.
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 React, { Component } from 'react'; | |
const withDeferRender = Presentational => | |
class DeferRender extends Component { | |
state = { | |
shouldRender: false, | |
}; | |
componentDidMount() { | |
window.requestAnimationFrame(() => { | |
window.requestAnimationFrame(() => | |
this.setState(() => ({ shouldRender: true }))); | |
}); | |
} | |
render() { | |
if (!this.state.shouldRender) return null; | |
return <Presentational {...this.props} />; | |
} | |
}; | |
export default withDeferRender; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@jsvg Good catch, but I think storing both the rAF tokens is an overkill because the requests would never coexist, here is how it should be :