Add shouldComponentUpdate to AltContainer

goatslacker · Apr 15, 2015 · edda162 · edda162
1 parent dbcd5dd
commit edda162
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 0 deletions.
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')
+ },
  }
 }