0
# React Pure Render Mixin
1

2
React Pure Render Mixin provides a performance optimization mixin for React components that implements `shouldComponentUpdate` with shallow comparison. It prevents unnecessary re-renders when props and state haven't changed, improving component performance through optimized render lifecycle management.
3

4
## Package Information
5

6
- **Package Name**: react-addons-pure-render-mixin
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm install react-addons-pure-render-mixin`
10

11
## Core Imports
12

13
```javascript
14
var PureRenderMixin = require('react-addons-pure-render-mixin');
15
```
16

17
ES6 import:
18

19
```javascript
20
import PureRenderMixin from 'react-addons-pure-render-mixin';
21
```
22

23
Script tag (after React):
24

25
```html
26
<!-- development version -->
27
<script src="https://unpkg.com/react-addons-pure-render-mixin/react-addons-pure-render-mixin.js"></script>
28

29
<!-- Access via React.addons.PureRenderMixin -->
30
```
31

32
## Basic Usage
33

34
```javascript
35
const createReactClass = require('create-react-class');
36

37
const MyComponent = createReactClass({
38
  mixins: [PureRenderMixin],
39

40
  render: function() {
41
    return <div className={this.props.className}>
42
      {this.props.children}
43
    </div>;
44
  }
45
});
46

47
// The mixin automatically provides shouldComponentUpdate optimization
48
// Component will only re-render when props or state actually change
49
```
50

51
## Capabilities
52

53
### Pure Render Optimization
54

55
Provides automatic `shouldComponentUpdate` implementation with shallow comparison optimization.
56

57
```javascript { .api }
58
/**
59
 * Mixin object containing shouldComponentUpdate method
60
 * Exported as the default export of the package
61
 * @type {Object}
62
 */
63
const PureRenderMixin = {
64
  /**
65
   * shouldComponentUpdate lifecycle method with shallow comparison
66
   * Compares current props/state with next props/state using shallow equality
67
   * @param {Object} nextProps - The next props that will be passed to component
68
   * @param {Object} nextState - The next state that will be set on component  
69
   * @returns {boolean} - true if component should update (props or state changed), false to skip re-render
70
   */
71
  shouldComponentUpdate: function(nextProps, nextState) {
72
    return (
73
      !shallowEqual(this.props, nextProps) ||
74
      !shallowEqual(this.state, nextState)
75
    );
76
  }
77
};
78
```
79

80
**Usage Example:**
81

82
```javascript
83
const React = require('react');
84
const createReactClass = require('create-react-class');
85
const PureRenderMixin = require('react-addons-pure-render-mixin');
86

87
const OptimizedComponent = createReactClass({
88
  mixins: [PureRenderMixin],
89

90
  getInitialState: function() {
91
    return {
92
      count: 0,
93
      message: 'Hello'
94
    };
95
  },
96

97
  increment: function() {
98
    this.setState({ count: this.state.count + 1 });
99
  },
100

101
  render: function() {
102
    return (
103
      <div>
104
        <p>{this.state.message}: {this.state.count}</p>
105
        <button onClick={this.increment}>Increment</button>
106
      </div>
107
    );
108
  }
109
});
110

111
// Component automatically skips re-render when:
112
// - Same props object reference is passed
113
// - setState is called with identical state values
114
// - Parent re-renders but passes same props
115
```
116

117
### Shallow Comparison Behavior
118

119
The mixin performs shallow (first-level) comparison only:
120

121
- **Primitive values**: Compares by value (`===` equality)
122
- **Object/Array references**: Compares by reference, not deep content
123
- **Nested changes**: Will NOT detect changes in nested objects or arrays
124

125
```javascript
126
// These changes WILL trigger re-render:
127
this.setState({ count: 1 });           // primitive change
128
this.setState({ items: newArray });    // array reference change
129

130
// These changes will NOT trigger re-render:
131
this.state.items.push(newItem);        // mutating existing array
132
this.state.user.name = 'New Name';     // mutating nested object
133

134
// To trigger re-render with nested changes, create new references:
135
this.setState({ 
136
  items: [...this.state.items, newItem],
137
  user: { ...this.state.user, name: 'New Name' }
138
});
139
```
140

141
## Important Notes
142

143
### Compatibility and Migration
144

145
- **Legacy Status**: This package is deprecated and no longer maintained
146
- **Replacement**: Use `React.PureComponent` (available since React 15.3.0) for ES6 classes
147
- **React Version**: Compatible with React versions that support mixins (createClass pattern)
148
- **Modern Alternative**: `React.memo()` for functional components
149

150
```javascript
151
// Modern equivalent using React.PureComponent:
152
class ModernComponent extends React.PureComponent {
153
  render() {
154
    return <div>{this.props.content}</div>;
155
  }
156
}
157

158
// Or with React.memo for functional components:
159
const FunctionalComponent = React.memo(function(props) {
160
  return <div>{props.content}</div>;
161
});
162
```
163

164
### Performance Considerations
165

166
- **Effective for**: Components with simple, flat props and state
167
- **Best with**: Immutable data patterns and primitive values
168
- **Avoid with**: Deeply nested objects or frequent object mutations
169
- **Use forceUpdate()**: When you know deep data structures have changed but mixin doesn't detect it
170

171
### Limitations
172

173
- **Mixin pattern only**: Cannot be used with ES6 class components
174
- **Shallow comparison**: May miss deep changes in complex data structures  
175
- **Subtree skipping**: When returning false, entire component subtree skips updates
176
- **False negatives**: May not re-render when deep data actually changed
177

178
## Dependencies
179

180
- **fbjs**: Provides `shallowEqual` utility function for comparison logic
181
- **object-assign**: Object assignment utility for polyfilling Object.assign functionality
182

183
## Error Handling
184

185
The mixin does not throw exceptions under normal usage. It safely handles:
186

187
- `null` or `undefined` props/state values
188
- Missing props or state properties
189
- Type mismatches in comparison
190

191
If comparison fails, it defaults to allowing the update (returns true).