Nutrient Packed Morsels

    react-pure-render-utils

    0.9.5 • Public • Published

    react-pure-render-utils

    NPM Version Build Status

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

    This module is directly based on gaeron's react-pure-render, adding decorators, tests and a high-order function.
    All rights for the original module is gaeron's.

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

    Usage

    Installing

    npm install react-pure-render-utils

    Function

    Requires ES7 class property transform to be enabled by putting { "stage": 0 } in your .babelrc.

    import shouldPureComponentUpdate from 'react-pure-render-utils/function';
     
    export default class Button extends Component {
      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-utils/component';
     
    export default class Button extends PureComponent {
      render() { }
    }

    Decorators

    This is based directly on taion's pull request to the original repo. This adds two decorators - pureClass and pureMethod:

    import { Component } from 'react';
    import { pureClass } from 'react-pure-render-utils/decorators';
     
    @pureClass
    export default class Button extends Component {
      render() { }
    }
    import { Component } from 'react';
    import { pureMethod } from 'react-pure-render-utils/decorators';
     
    export default class Button extends Component {
      
      @pureMethod
      calc() { 
        return someHeavyCalc(this.props);
      }
     
      render() { }
    }

    High-Order Function

    In version 0.14, React introduced stateless components. This is a great way to write components as stateless "pure" functions. However, since they don't have lifecycle hooks, there is no way to enforce "pure render".
    Using this you can wrap your component in a "purify" high-order function, in order to guarantee pure render.

    import pureStateless from 'react-pure-render-utils/high-order';
     
    let Title = (props, context) => <div onClick={props.onClick}>{props.title}</div>
     
    export default pureStateless(Title);

    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-utils/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-utils/shallowEqual';
    console.log(shallowEqual({ x: 42 }, { x: 42 });

    Known Issues

    If a component in the middle of your rendering chain has pure rendering, but some nested component relies on a context change up the tree, the nested component won't learn about context change and won't update. This is a known React issue that exists because context is not a documented feature and is not finished. However some React libraries already rely on context, for example, React Router. My suggestion for now is to use pure components in apps relying on such libraries very carefully, and only use pure rendering for leaf-ish components that are known not to rely on any parent context.

    Further Reading

    License

    MIT

    Install

    npm i react-pure-render-utils

    DownloadsWeekly Downloads

    463

    Version

    0.9.5

    License

    MIT

    Last publish

    Collaborators

    • liady