PureRenderMixin

"Shawn, PureRenderMixin is an add-on that can be used in place of shouldComponentUpdate. Under the hood, it uses shouldComponentUpdate and compares the current props and state with the next props and states. Let's try it in our code. First, we need to install the add-on, of course." said Mike.

$ npm install react-addons-pure-render-mixin

// src/Header.js

import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';

export default React.createClass({
  mixins: [PureRenderMixin],
     ..
     ..
})

// src/Form.js

import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';

export default React.createClass({
  mixins: [PureRenderMixin],
  ..
  ..
     }
})

"Shawn, let's see the wasted time now that we have used PureRenderMixin." said Mike.

"Oh, it got worse. The PureRenderMixin function added the time wasted in re-rendering Form and Header components back. What is going on, Mike?" Shawn asked.

"Calm down! I am going...