Package Exports

react-pure-render
react-pure-render/component
react-pure-render/function
react-pure-render/mixin
react-pure-render/shallowEqual

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-pure-render) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-pure-render

A function, a component and a mixin for React pure rendering.

This module provides exactly the same functionality as PureRenderMixin, but as a standalone module and in three different flavors.

Usage

Function

This is my preferred method, but it requires ES7 class property transform to be enabled by putting { "stage": 0 } in your .babelrc.

import shouldPureComponentUpdate from 'react-pure-render/function';

export default class Button {
  shouldComponentUpdate = shouldPureComponentUpdate;

  render() { }
}

Component

Inheritance is not very cool but it doesn't hurt a lot if it's just for the sake of this single method. If you don't want to use stage 0 transforms, you can use a base class instead:

import PureComponent from 'react-pure-render/component';

export default class Button extends PureComponent {
  render() { }
}

Mixin

If you're working with createClass-style components, use the mixin. It's exactly the same as React.addons.PureRenderMixin.

var React = require('react');
var PureMixin = require('react-pure-render/mixin');

var Button = React.createClass({
  mixins: [PureMixin],

  render: function () { }
});

module.exports = Button;

shallowEqual

Sometimes shallowEqual is all you need. It's bad to reach out into React internals, so this library exposes exactly the same shallowEqual you already know and love from React.

import shallowEqual from 'react-pure-render/shallowEqual';
console.log(shallowEqual({ x: 42 }, { x: 42 });

License

MIT