Modern React Flux application example (pt. 3)

Continuing from where we left off in part 2, I want to talk about Pure Render Mixin and "pure" components.

Pure Render Mixin

Facebook documentation on this mixin is surprisingly good, check it out here first. The whole code can be seen on Github, and it's pretty nicely simple.

• ReactComponentWithPureRenderMixin

• shallowEqual

The main thing you should keep in mind is that if any of the old props/state are not equal to the new props/state i.e. props.myProperty !== newProps.myProperty

This works because it uses the lifecycle method ShouldComponentUpdate to return a boolean. If true, React will go ahead and rerun the render method in the component (and, consequently, call on the children to render themselves based on the props passed in).

You don't have to bring in the heavy React.addons to use this though, just bring it in specifically. After going through the React publish cycle, the pure render mixin will be exposed through react/lib/ReactComponentWithPureRenderMixin.js, like so:

/** @jsx React.DOM **/
var React = require('react');
var ReactComponentWithPureRenderMixin = require('react/lib/ReactComponentWithPureRenderMixin');

module.exports = React.createClass({
  mixin: [ReactComponentWithPureRenderMixin],

  render: function () {
    return (
      <td className="example-table-element">
        {this.props.children}
      </td>
    );
  }
});

That's about it, just make sure your component doesn't do anything that makes render not an idempotent function of props and state.

What's next?

Part 4

Next time, we'll talk about problems with using Pure Render Mixin for computed elements and profiling performance in our application.