Add shouldComponentUpdate to AltContainer

goatslacker · goatslacker · commit edda16284f88 · 2015-04-14T17:49:55.000-07:00
diff --git a/components/AltContainer.js b/components/AltContainer.js
@@ -160,6 +160,12 @@ var AltContainer = React.createClass({
     )
   },
 
+  shouldComponentUpdate: function () {
+    return this.props.shouldComponentUpdate
+      ? this.props.shouldComponentUpdate(this.getProps())
+      : true
+  },
+
   render: function () {
     var children = this.props.children
 
diff --git a/docs/components/altContainer.md b/docs/components/altContainer.md
@@ -197,3 +197,19 @@ const flux = new Flux();
 ```
 
 Header, Body, and Footer will have the `flux` context passed down.
+
+## `shouldComponentUpdate`
+
+`shouldComponentUpdate` prop allows you to fine-tune your performance needs for AltContainer only rendering when absolutely necessary.
+
+This is a function that gets called with the props that your children will receive. You return a boolean depending on if you wish to re-render or not.
+
+```js
+<AltContainer shouldComponentUpdate={(nextProps) => false}>
+  <Header />
+  <Body />
+  <Footer />
+</AltContainer>
+```
+
+In this example, Header, Body, and Footer will not re-render because we're returning false.
diff --git a/test/store-listener-component-test.js b/test/store-listener-component-test.js
@@ -461,5 +461,20 @@ export default {
       assert.isObject(span.props.FooActions, 'actions are injected')
       assert.isFunction(span.props.FooActions.sup, 'sup is available')
     },
+
+    'scu'() {
+      const scu = sinon.stub().returns(true)
+
+      const node = TestUtils.renderIntoDocument(
+        <AltContainer shouldComponentUpdate={scu} store={TestStore}>
+          <span />
+        </AltContainer>
+      )
+
+      action.sup()
+      assert.ok(scu.calledOnce, 'custom shouldComponentUpdate was called')
+      assert(scu.args[0].length === 1, 'only one arg is passed, the props')
+      assert.isDefined(scu.args[0][0].x, 'x prop exists')
+    },
   }
 }
