Skip to content

Commit 8f90923

Browse files
committed
[Docs] Document PureRenderMixin addon
Fixes facebook#1816
1 parent 92d2dcc commit 8f90923

File tree

3 files changed

+33
-0
lines changed

3 files changed

+33
-0
lines changed

docs/_data/nav_docs.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@
5555
title: Cloning Components
5656
- id: update
5757
title: Immutability Helpers
58+
- id: pure-render-mixin
59+
title: PureRenderMixin
5860
- title: Reference
5961
items:
6062
- id: top-level-api

docs/docs/09.6-update.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ title: Immutability Helpers
44
layout: docs
55
permalink: update.html
66
prev: clone-with-props.html
7+
next: pure-render-mixin.html
78
---
89

910
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.
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
id: pure-render-mixin
3+
title: PureRenderMixin
4+
layout: docs
5+
permalink: pure-render-mixin.html
6+
prev: update.html
7+
---
8+
9+
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.
10+
11+
Example:
12+
13+
```js
14+
var PureRenderMixin = require('react').addons.PureRenderMixin;
15+
React.createClass({
16+
mixins: [PureRenderMixin],
17+
18+
render: function() {
19+
return <div className={this.props.className}>foo</div>;
20+
}
21+
});
22+
```
23+
24+
Under the hood, the mixin implements [shouldComponentUpdate](/react/docs/component-specs.html#updating-shouldcomponentupdate), in which it compares the current props and state with the next ones and returns `false` if the equalities pass.
25+
26+
> Note:
27+
>
28+
> This only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences. Only mix into components which have simple props and state, or use `forceUpdate()` when you know deep data structures have changed.
29+
>
30+
> Furthermore, `shouldComponentUpdate` skips updates for the whole component subtree. Make sure all the children components are also "pure".

0 commit comments

Comments
 (0)