Using mixin instead of decorator

Author: marcusvmsa

client/app/bundles/comments/components/CommentBox/CommentBox.jsx

@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react';
-import pureRender from 'pure-render-decorator';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 import CommentForm from './CommentForm/CommentForm';
 import CommentList from './CommentList/CommentList';
@@ -12,6 +12,10 @@ export default class CommentBox extends React.Component {
     data: PropTypes.object.isRequired,
   };
 
+  shouldComponentUpdate() {
+    return PureRenderMixin.shouldComponentUpdate.apply(this, arguments);
+  }
+
   componentDidMount() {
     const { fetchComments } = this.props.actions;
     fetchComments();

client/app/bundles/comments/components/CommentBox/CommentForm/CommentForm.jsx

@@ -8,7 +8,7 @@ import NavItem from 'react-bootstrap/lib/NavItem';
 import Alert from 'react-bootstrap/lib/Alert';
 import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup';
 import _ from 'lodash';
-import pureRender from 'pure-render-decorator';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 const emptyComment = { author: '', text: '' };
 const textPlaceholder = 'Say something using markdown...';
@@ -36,6 +36,10 @@ export default class CommentForm extends React.Component {
     ]);
   }
 
+  shouldComponentUpdate() {
+    return PureRenderMixin.shouldComponentUpdate.apply(this, arguments);
+  }
+
   _handleSelect(selectedKey) {
     this.setState({ formMode: selectedKey });
   }

client/app/bundles/comments/components/CommentBox/CommentList/Comment/Comment.jsx

@@ -1,22 +1,19 @@
 import React, { PropTypes } from 'react';
 import marked from 'marked';
-import pureRender from 'pure-render-decorator';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
-<<<<<<< HEAD:client/app/bundles/comments/components/CommentBox/CommentList/Comment/Comment.jsx
 import css from './Comment.scss';
 
 export default class Comment extends React.Component {
-
-=======
-@pureRender
-class Comment extends React.Component {
-  static displayName = 'Comment';
->>>>>>> Including pure render decorator:client/app/bundles/Comments/components/Comment.jsx
   static propTypes = {
     author: PropTypes.string.isRequired,
     text: PropTypes.string.isRequired,
   };
 
+  shouldComponentUpdate() {
+    return PureRenderMixin.shouldComponentUpdate.apply(this, arguments);
+  }
+
   render() {
     const { author, text } = this.props;
     const rawMarkup = marked(text, { gfm: true, sanitize: true });

client/app/bundles/comments/components/CommentBox/CommentList/CommentList.jsx

@@ -3,6 +3,7 @@ import Immutable from 'immutable';
 import Alert from 'react-bootstrap/lib/Alert';
 import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup';
 import _ from 'lodash';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 import Comment from './Comment/Comment';
 
@@ -19,6 +20,10 @@ export default class CommentList extends React.Component {
     _.bindAll(this, '_errorWarning');
   }
 
+  shouldComponentUpdate() {
+    return PureRenderMixin.shouldComponentUpdate.apply(this, arguments);
+  }
+
   _errorWarning() {
     // If there is no error, there is nothing to add to the DOM
     if (!this.props.error) return null;

client/app/bundles/comments/components/SimpleCommentScreen/SimpleCommentScreen.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Immutable from 'immutable';
 import request from 'axios';
 import _ from 'lodash';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 import metaTagsManager from 'libs/metaTagsManager';
 import CommentForm from '../CommentBox/CommentForm/CommentForm';
@@ -20,6 +21,10 @@ export default class SimpleCommentScreen extends React.Component {
     _.bindAll(this, '_fetchComments', '_handleCommentSubmit');
   }
 
+  shouldComponentUpdate() {
+    return PureRenderMixin.shouldComponentUpdate.apply(this, arguments);
+  }
+
   componentDidMount() {
     this._fetchComments();
   }

client/app/bundles/comments/components/TestReactRouter/TestReactRouter.jsx

@@ -1,8 +1,10 @@
 import React from 'react';
-import pureRender from 'pure-render-decorator';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
-@pureRender
 export default class TestReactRouter extends React.Component {
+  shouldComponentUpdate() {
+    return PureRenderMixin.shouldComponentUpdate.apply(this, arguments);
+  }
 
   render() {
     return (

client/app/bundles/comments/components/TestReactRouterRedirect/TestReactRouterRedirect.jsx

@@ -1,8 +1,10 @@
 import React from 'react';
-import pureRender from 'pure-render-decorator';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
-@pureRender
 export default class TestReactRouterRedirect extends React.Component {
+  shouldComponentUpdate() {
+    return PureRenderMixin.shouldComponentUpdate.apply(this, arguments);
+  }
 
   static checkAuth(nextState, replaceState) {
     // Hard code this to demonstrate the effect

client/app/bundles/comments/containers/NonRouterCommentsContainer.jsx

@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import pureRender from 'pure-render-decorator';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 import CommentScreen from '../components/CommentScreen/CommentScreen';
 import * as commentsActionCreators from '../actions/commentsActionCreators';
@@ -17,6 +17,10 @@ class NonRouterCommentsContainer extends React.Component {
     data: PropTypes.object.isRequired,
   };
 
+  shouldComponentUpdate() {
+    return PureRenderMixin.shouldComponentUpdate.apply(this, arguments);
+  }
+
   render() {
     const { dispatch, data } = this.props;
     const actions = bindActionCreators(commentsActionCreators, dispatch);

client/app/bundles/comments/containers/RouterCommentsContainer.jsx

@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import pureRender from 'pure-render-decorator';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 import CommentScreen from '../components/CommentScreen/CommentScreen';
 import * as commentsActionCreators from '../actions/commentsActionCreators';
@@ -20,6 +20,10 @@ class RouterCommentsContainer extends React.Component {
     }).isRequired,
   };
 
+  shouldComponentUpdate() {
+    return PureRenderMixin.shouldComponentUpdate.apply(this, arguments);
+  }
+
   render() {
     const { dispatch, data } = this.props;
     const actions = bindActionCreators(commentsActionCreators, dispatch);

client/package.json

@@ -67,7 +67,7 @@
     "node-uuid": "^1.4.7",
     "postcss-loader": "^0.8.0",
     "react": "^0.14.3",
-    "react-addons-shallow-compare": "^0.14.3",
+    "react-addons-pure-render-mixin": "^0.14.3",
     "react-bootstrap": "^0.28.1",
     "react-dom": "^0.14.3",
     "react-redux": "^4.0.0",