Added tests and updated docs to address #50

README.md

@@ -67,6 +67,9 @@ const TodoView = observer(React.createClass({
 const TodoView = observer(({todo}) => <div>{todo.title}</div>)
 ```
 
+It is possible to set a custom `shouldComponentUpdate`, but in general this should be avoid as MobX will by default provide a highly optimized `shouldComponentUpdate` implementation, based on `PureRenderMixin`.
+If a custom `shouldComponentUpdate` is provided, it is consulted when the props changes (because the parent passes new props) or the state changes (as a result of calling `setState`), but if an observable used by the rendering is changed, the component will be re-rendered and `shouldComponent` is not consulted. 
+
 ### `componentWillReact` (lifecycle hook)
 
 React components usually render on a fresh stack, so that makes it often hard to figure out what _caused_ a component to re-render.

test/misc.js

@@ -0,0 +1,73 @@
+var React = require('react');
+var enzyme = require('enzyme');
+var mount = enzyme.mount;
+var mobx = require('mobx');
+var observer = require('../').observer;
+var Provider = require('../').Provider;
+var test = require('tape');
+var e = React.createElement;
+
+test('custom shouldComponentUpdate is not respected for observable changes (#50)', t => {
+    var called = 0;
+    var x = mobx.observable(3)
+    var C = observer(React.createClass({
+        render: function() {
+            return e("div", {}, "value:" + x.get());
+        },
+        shouldComponentUpdate() {
+            called++;
+        }
+    }));
+
+    const wrapper = mount(e(C));
+    t.equal(wrapper.find("div").text(), "value:3");
+    t.equal(called, 0)
+    x.set(42);
+    t.equal(wrapper.find("div").text(), "value:42");
+    t.equal(called, 0)
+
+    t.end();
+})
+
+test('custom shouldComponentUpdate is not respected for observable changes (#50)', t => {
+    var called = 0;
+    var y = mobx.observable(5)
+
+    var C = observer(React.createClass({
+        render: function() {
+            return e("div", {}, "value:" + this.props.y);
+        },
+        shouldComponentUpdate(nextProps) {
+            called++;
+            return nextProps.y !== 42;
+        }
+    }));
+
+    var B = observer(React.createClass({
+        render: function() {
+            return e("span", {}, e(C, {y: y.get()}));
+        },
+        shouldComponentUpdate() {
+            called++;
+        }
+    }));
+
+
+    const wrapper = mount(e(B));
+    t.equal(wrapper.find("div").text(), "value:5");
+    t.equal(called, 0)
+
+    y.set(6);
+    t.equal(wrapper.find("div").text(), "value:6");
+    t.equal(called, 1)
+
+    y.set(42)
+    t.equal(wrapper.find("div").text(), "value:6"); // not updated!
+    t.equal(called, 2)
+
+    y.set(7)
+    t.equal(wrapper.find("div").text(), "value:7");
+    t.equal(called, 3)
+
+    t.end();
+})