Prevent component from re-rendering on change

[chrisbuttery]

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.

[danwad]

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.

[iazel]

Well, that's depends if you want to never re-render it of if you want to re-render only if props change.

Never re-render

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.

Re-render only on props change

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.

[chrisbuttery]

Thank you both @iazel and @danwad