Ian Obermiller

Part time hacker, full time dad.

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.