react-immutable-render-mixin

react-immutable-render-mixin

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 :hankey:. Users should be able to achieve maximum performance simply using PureRenderMixin.

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>;
  }
}

Usage with default shouldComponentUpdate

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>;
  }
}

Usage with a custom shouldComponentUpdate

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>;
  }
});