diff --git a/_data/nav_docs.yml b/_data/nav_docs.yml index e9394d05..86f44eb7 100644 --- a/_data/nav_docs.yml +++ b/_data/nav_docs.yml @@ -65,6 +65,8 @@ title: PureRenderMixin - id: perf title: Performance Tools + - id: shallow-compare + title: Shallow Compare - id: advanced-performance title: Advanced Performance - id: context diff --git a/docs/10-addons.md b/docs/10-addons.md index a0a5cc50..54636334 100644 --- a/docs/10-addons.md +++ b/docs/10-addons.md @@ -14,6 +14,7 @@ The React add-ons are a collection of useful utility modules for building React - [`createFragment`](create-fragment.html), to create a set of externally-keyed children. - [`update`](update.html), a helper function that makes dealing with immutable data in JavaScript easier. - [`PureRenderMixin`](pure-render-mixin.html), a performance booster under certain situations. +- [`shallowCompare`](shallow-compare.html), a helper function that performs a shallow comparison for props and state in a component to decide if a component should update. The add-ons below are in the development (unminified) version of React only: diff --git a/docs/10.10-shallow-compare.md b/docs/10.10-shallow-compare.md new file mode 100644 index 00000000..4ce3ee41 --- /dev/null +++ b/docs/10.10-shallow-compare.md @@ -0,0 +1,32 @@ +--- +id: shallow-compare +title: Shallow Compare +permalink: shallow-compare.html +prev: perf.html +next: advanced-performance.html +--- + +`shallowCompare` is a helper function to achieve the same functionality as `PureRenderMixin` while using ES6 classes with React. + +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 helper function for a performance boost in some cases. + +Example: + +```js +var shallowCompare = require('react-addons-shallow-compare'); +export class SampleComponent extends React.Component { + shouldComponentUpdate(nextProps, nextState) { + return shallowCompare(this, nextProps, nextState); + } + + render() { + return