Users are urged to use PureRenderMixin with facebook/immutable-js. If performance is still an issue an examination of your usage of Immutable.js should be your first path towards a solution. This library was created from experimentations with Immutable that were ultimately erroneous; improper usage of Immutable.js 💩. Users should be able to achieve maximum performance simply using PureRenderMixin.
This library exposes 4 distinct options for immutable rendering:
- Mixin for
React.createClasssupport - HoC ( decorator ) for
React.Component - shouldComponentUpdate function used by the mixin and HoC
- shallowEqualImmutable function to allow custom
shouldComponentUpdateimplementations
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.
npm i react-immutable-render-mixinimport immutableRenderMixin from 'react-immutable-render-mixin';
React.createClass({
mixins: [immutableRenderMixin],
render: function() {
return <div className={this.props.className}>foo</div>;
}
});import React from 'react';
import { immutableRenderDecorator } from 'react-immutable-render-mixin';
class Test extends React.Component {
render() {
return <div></div>;
}
}
export default immutableRenderDecorator(Test);import React from 'react';
import { immutableRenderDecorator } from 'react-immutable-render-mixin';
@immutableRenderDecorator
class Test extends React.Component {
render() {
return <div></div>;
}
}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>;
}
}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>;
}
}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>;
}
});
