diff --git a/_data/nav_docs.yml b/_data/nav_docs.yml index 794ad9bf..0744fa03 100644 --- a/_data/nav_docs.yml +++ b/_data/nav_docs.yml @@ -55,6 +55,8 @@ title: Cloning Components - id: update title: Immutability Helpers + - id: pure-render-mixin + title: PureRenderMixin - title: Reference items: - id: top-level-api diff --git a/docs/09.6-update.md b/docs/09.6-update.md index 18f1a6f5..6f8b93be 100644 --- a/docs/09.6-update.md +++ b/docs/09.6-update.md @@ -4,6 +4,7 @@ title: Immutability Helpers layout: docs permalink: update.html prev: clone-with-props.html +next: pure-render-mixin.html --- React lets you use whatever style of data management you want, including mutation. However, if you can use immutable data in performance-critical parts of your application it's easy to implement a fast `shouldComponentUpdate()` method to significantly speed up your app. diff --git a/docs/09.7-pure-render-mixin.md b/docs/09.7-pure-render-mixin.md new file mode 100644 index 00000000..2235dceb --- /dev/null +++ b/docs/09.7-pure-render-mixin.md @@ -0,0 +1,30 @@ +--- +id: pure-render-mixin +title: PureRenderMixin +layout: docs +permalink: pure-render-mixin.html +prev: update.html +--- + +If your React component's render function is "pure" (in other words, it renders the same result given the same props and state), you can use this mixin for a considerable performance boost. + +Example: + +```js +var PureRenderMixin = require('react').addons.PureRenderMixin; +React.createClass({ + mixins: [PureRenderMixin], + + render: function() { + return