Ian Obermiller

Part time hacker, full time dad.

React Pure Render Decorator

Posted 2015-06-20

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.