LoginSignup
3
3

More than 5 years have passed since last update.

Modern React Flux application example (pt. 3)

Last updated at Posted at 2014-10-29

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.

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.

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3