Need help with react-pure-render?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

gaearon
453 Stars 27 Forks MIT License 23 Commits 1 Opened issues

Description

[No Maintenance Intended] A function, a component and a mixin for React pure rendering

Services available

!
?

Need anything else?

Contributors list

No Data

No Maintenance Intended

No Maintenance Intended

This project is no longer actively maintained. It does its job, but there are no plans to extend or change it. We suggest you to use the official

react-addons-shallow-compare
package instead which does the same job. To wrap functional components in a more expressive way, we encourage you to check out
recompose
.

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 { Component } from 'react';
import shouldPureComponentUpdate from 'react-pure-render/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/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 }));

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 an experimental 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.