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;

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?