PureComponent’s allow you to short circuit the rendering of a component branch by checking if the current props / state are shallowly equal to the nextProps / nextState in
shouldComponentUpdate. However, the equality comparison is not free, and has to be done on each re-render.
shouldComponentUpdate returns true, then the re-render still has to happen, which means that actually made your app less efficient by adding the additional work in
However, the big gains come from when
shouldComponentUpdate returns false, especially for components higher in the component tree, because you avoid having to create the element tree for that component and all of its descendants.
So there isn’t a black and white answer on when a
PureComponent should be used. As with any sort of optimization, you have to profile the code and see if using it will be beneficial for you.
I think Ben is advocating for using
PureComponents in a few places (probably high up in the component tree) so you get the biggest wins, and avoid the penalty of having to do
shouldComponentUpdate in all of your components.
The approach that we are currently testing out is the opposite, which is put
PureComponents everywhere, and remove it from places where we are doing wasteful
shouldComponentUpdate. This is a newer approach and it might not work out, but we’ll post our results in a followup post.
Hope that helped!