React Pure Render Decorator
Posted
If you've adopted JavaScript classes when working with React, you may be missing PureRenderMixin
. You can emulate it easily using decorators:
var shallowEqual = require('react/lib/shallowEqual');
module.exports = function PureRender(Component) {
Component.prototype.shouldComponentUpdate = function (
nextProps,
nextState,
) {
return (
!shallowEqual(this.props, nextProps) ||
!shallowEqual(this.state, nextState)
);
};
return Component;
};
Use it with the decorator syntax or just as a wrapper around your component:
@PureRender
class Button extends Component { ... }
Button = PureRender(Button);
The logic is exactly the same as PureRenderMixin
. Keep in mind that this could break if/when React's internals are rearranged, since we are deeply requiring shallowEqual
. This hasn't been published to NPM, but if you'd like to see it drop me a comment. Hopefully a pure rendering decorator will make its way into react-pure-render instead.