gistfile1.js

var pureRender = (Component) => {
  Object.assign(Component.prototype, {
    shouldComponentUpdate (nextProps, nextState) {
      return !shallowEqual(this.props, nextProps) ||
             !shallowEqual(this.state, nextState);
    }
  });
};

module.exports = pureRender;

///////////////////////////////////////////////////
var pureRender = require('./pureRender');

class Foo extends React.Component {
  render () {
    return <div>this ain’t so bad</div>
  }
}

pureRender(Foo); // don't return so you know its mutative :(

module.exports = Foo;

updated, I can't think of a very declarative way to do this except to mutate the prototype or inherit :\

@ryanflorence You can still Object.assign({}, ...) and return a mutated clone.

How do you feel about this approach?

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.shouldComponentUpdate = React.addons.PureRenderMixin.shouldComponentUpdate.bind(this);
  }
  render () {
    return <div>Helllo</div>
  }
}

@aputinski you get a gold star for simplest possible solution :-)

In any cases that are more complex than a single lifecycle hook, this doesn't work as well.

@RickWong methods on es6 classes aren't enumerable, but you could do Object.assign(Object.create(Foo), {should...})

Does the latest gist work without any issues? Hard to tell by the comments. :)

@aputinski 👍

@aputinski +1

Won't be easier just extending Component?

class PureRenderComponent extends React.Component {
  shouldComponentUpdate () {
    return React.addons.PureRenderMixin.shouldComponentUpdate.apply(this, arguments)
  }
}

class Foo extends PureRenderComponent {
  render () {
    return (<div>Pure</div>)
  }
}

Sorry to pile on, but this is one of the top hits when searching for PureRenderMixin in ES6, my two cents:

const pure = function (target) {
  target.prototype.shouldComponentUpdate = React.addons.PureRenderMixin.shouldComponentUpdate;
  return target;
}

@pure
class Test extends React.Component { }

E.g. https://jsbin.com/zayoda/4/edit?js,console,output

Hi, is the code provided by @aputinski still works? I'm using react 15.0.1 and it doesn't work for me.

@jameswnl
From official docs:

import PureRenderMixin from 'react-addons-pure-render-mixin';
class FooComponent extends React.Component {
  constructor(props) {
    super(props);
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
  }

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

You need to install the addon as well.

@brigand
Can you elaborate on your statement "In any cases that are more complex than a single lifecycle hook, this doesn't work as well".

What exactly are the drawbacks to this same approach that is also now listed in the official React docs?