PureRenderMixin in an ES6 React component

Question

Is there any way to include a mixin in a React ES6 class component? (i.e extends React.Component)? If so, what is the official way of doing it?

I'd like to include PureRenderMixin in one of my components that has an immutable state to speed up the diffing process.

Answer 1

https://facebook.github.io/react/docs/shallow-compare.html

shallowCompare is a helper function to achieve the same functionality as PureRenderMixin while using ES6 classes with React.

import shallowCompare from 'react-addons-shallow-compare';

export default class SampleComponent extends React.Component {

  shouldComponentUpdate(nextProps, nextState) {
    // pure render
    return shallowCompare(this, nextProps, nextState);
  }

  render() {
    return <div className={this.props.className}>foo</div>;
  }
}

Source code of PureRenderMixin is:

var ReactComponentWithPureRenderMixin = {
  shouldComponentUpdate: function(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  },
};

So, when You use PureRenderMixin, You actually use shallowCompare

UPDATE 15.3.0:

Add React.PureComponent - a new base class to extend, replacing react-addons-pure-render-mixin now that mixins don't work with ES2015 classes.