Closed chrisbuttery closed 8 years ago
I haven't used the following but @rstacruz created deku-memoize - a higher order component which uses your component's shouldUpdate()
method to memoize render()
.
See discussion in #336.
Well, that's depends if you want to never re-render it of if you want to re-render only if props change.
In the first case, you can simply make a singleton:
import VideoCamera from './components'
const videocamera = h(VideoCamera)
const comp = ({ props }) => h('div', {}, [videocamera])
Now, each time comp
will be rendered, videocamera will be the same node and totally skip the diff/update phase.
You can use deku-memoize as already suggested, or reselect
. I sincerly prefer the latter and that's becuse I already use it in other parts of my app.
import { createSelector } from 'reselect'
import { getVideoProps } from './selectors'
const VideoCamera = ({ props }) => vnode_tree
const stateToProps = (state) => props
export default createSelector(
stateToProps,
(props) => h(VideoCamera, props)
)
In case you have more than one instance in the same vnode_tree
and with different inputs, you should have a makeVideoCamera
function to create them.
Thank you both @Iazel and @danwad
Previously in version 1.0.0 we had lifecycle methods such as
shouldUpdate
to prevent a component from re-rendering on change. I'm wondering how other folks are handling this now, seeing most of these methods no longer exist.I have a component displaying a video camera that I don't want to re-render while other changes/updates are being fired from my redux store.