README
react-immutable-render-mixin
This library exposes 4 distinct options for immutable rendering:
- Mixin for
React.createClass
support - HoC ( decorator ) for
React.Component
- shouldComponentUpdate function used by the mixin and HoC
- shallowEqualImmutable function to allow custom
shouldComponentUpdate
implementations
This library when used as a mixin/decorator replaces the PureRenderMixin when using facebook/immutable-js library with React
This Mixin and HoC implements shouldComponentUpdate
method using prop and state equality with Immutable.is().
We also expose the shallowEqualImmutable
to allow developers to craft a custom shouldComponentUpdate
method as needed.
Installation
npm i react-immutable-render-mixin
Usage as Mixin
import immutableRenderMixin from 'react-immutable-render-mixin';
React.createClass({
mixins: [immutableRenderMixin],
render: function() {
return <div className={this.props.className}>foo</div>;
}
});
Usage as a HoC
import React from 'react';
import { immutableRenderDecorator } from 'react-immutable-render-mixin';
class Test extends React.Component {
render() {
return <div></div>;
}
}
export default immutableRenderDecorator(Test);
Usage as Decorator
import React from 'react';
import { immutableRenderDecorator } from 'react-immutable-render-mixin';
@immutableRenderDecorator
class Test extends React.Component {
render() {
return <div></div>;
}
}
shouldComponentUpdate
Usage with default import React from 'react';
import { shouldComponentUpdate } from 'react-immutable-render-mixin';
class Test extends React.Component {
constructor(props) {
super(props);
this.shouldComponentUpdate = shouldComponentUpdate.bind(this);
}
render() {
return <div></div>;
}
}
shouldComponentUpdate
Usage with a custom import React from 'react';
import { shallowEqualImmutable } from 'react-immutable-render-mixin';
class Test extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
return !shallowEqualImmutable(this.props, nextProps) || !shallowEqualImmutable(this.state, nextState);
}
render() {
return <div></div>;
}
}
Usage with <= ES5
Exports:
var immutableRenderMixin = require('react-immutable-render-mixin').default;
var immutableRenderDecorator = require('react-immutable-render-mixin').immutableRenderDecorator;
var shallowEqualImmutable = require('react-immutable-render-mixin').shallowEqualImmutable;
var shouldComponentUpdate = require('react-immutable-render-mixin').shouldComponentUpdate;
Full Example:
var immutableRenderMixin = require('react-immutable-render-mixin').default;
React.createClass({
mixins: [immutableRenderMixin],
render: function() {
return <div className={this.props.className}>foo</div>;
}
});