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.
; shouldComponentUpdate = shouldPureComponentUpdate; { }
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:
; { }
Mixin
If you're working with createClass
-style components, use the mixin. It's exactly the same as React.addons.PureRenderMixin
.
var React = ;var PureMixin = ; var Button = React; moduleexports = 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.
;console
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