Using mixin instead of decorator

Author: marcusvmsa

client/app/bundles/Comments/components/Comment.jsx

@@ -1,15 +1,18 @@
 import React, { PropTypes } from 'react';
 import marked from 'marked';
-import pureRender from 'pure-render-decorator';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
-@pureRender
 class Comment extends React.Component {
   static displayName = 'Comment';
   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.jsx

@@ -1,10 +1,9 @@
 import React, { PropTypes } from 'react';
-import pureRender from 'pure-render-decorator';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 import CommentForm from './CommentForm';
 import CommentList from './CommentList';
 
-@pureRender
 class CommentBox extends React.Component {
   constructor(props, context) {
     super(props, context);
@@ -18,6 +17,10 @@ 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/CommentForm.jsx

@@ -8,12 +8,11 @@ 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...';
 
-@pureRender
 class CommentForm extends React.Component {
   constructor(props, context) {
     super(props, context);
@@ -33,6 +32,10 @@ class CommentForm extends React.Component {
     error: PropTypes.any,
   };
 
+  shouldComponentUpdate() {
+    return PureRenderMixin.shouldComponentUpdate.apply(this, arguments);
+  }
+
   _handleSelect(selectedKey) {
     this.setState({ formMode: selectedKey });
   }

client/app/bundles/Comments/components/CommentList.jsx

@@ -2,11 +2,10 @@ import React, { PropTypes } from 'react';
 import Immutable from 'immutable';
 import Alert from 'react-bootstrap/lib/Alert';
 import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup';
-import pureRender from 'pure-render-decorator';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 import Comment from './Comment';
 
-@pureRender
 class CommentList extends React.Component {
 
   constructor(props, context) {
@@ -23,6 +22,10 @@ class CommentList extends React.Component {
     error: PropTypes.any,
   };
 
+  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 undefined;

client/app/bundles/Comments/components/CommentScreen.jsx

@@ -1,15 +1,18 @@
 import React, { PropTypes } from 'react';
-import pureRender from 'pure-render-decorator';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 import CommentBox from './CommentBox';
 
-@pureRender
 class CommentScreen extends React.Component {
   static propTypes = {
     actions: PropTypes.object.isRequired,
     data: PropTypes.object.isRequired,
   };
 
+  shouldComponentUpdate() {
+    return PureRenderMixin.shouldComponentUpdate.apply(this, arguments);
+  }
+
   render() {
     const { data, actions } = this.props;
 

client/app/bundles/Comments/components/NonRouterCommentScreen.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 './CommentScreen';
 import * as commentsActionCreators from '../actions/commentsActionCreators';
@@ -11,13 +11,16 @@ function select(state) {
   return { data: state.$$commentsStore };
 }
 
-@pureRender
 class NonRouterCommentScreen extends React.Component {
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
     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/components/RouterCommentScreen.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 './CommentScreen';
 import * as commentsActionCreators from '../actions/commentsActionCreators';
@@ -11,7 +11,6 @@ function select(state) {
   return { data: state.$$commentsStore };
 }
 
-@pureRender
 class RouterCommentScreen extends React.Component {
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
@@ -21,6 +20,10 @@ class RouterCommentScreen extends React.Component {
     }).isRequired,
   };
 
+  shouldComponentUpdate() {
+    return PureRenderMixin.shouldComponentUpdate.apply(this, arguments);
+  }
+
   _renderNotification() {
     const locationState = this.props.location.state;
     if (!locationState || !locationState.redirectFrom) return null;

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

@@ -2,13 +2,12 @@ import React from 'react';
 import Immutable from 'immutable';
 import request from 'axios';
 import _ from 'lodash';
-import pureRender from 'pure-render-decorator';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 import CommentForm from './CommentForm';
 import CommentList from './CommentList';
 import metaTagsManager from '../utils/metaTagsManager';
 
-@pureRender
 class SimpleCommentScreen extends React.Component {
   constructor(props, context) {
     super(props, context);
@@ -24,6 +23,10 @@ class SimpleCommentScreen extends React.Component {
 
   static displayName = 'SimpleCommentScreen';
 
+  shouldComponentUpdate() {
+    return PureRenderMixin.shouldComponentUpdate.apply(this, arguments);
+  }
+
   componentDidMount() {
     this._fetchComments();
   }

client/app/bundles/Comments/components/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.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/package.json

@@ -52,9 +52,8 @@
     "lodash": "^3.10.1",
     "marked": "^0.3.5",
     "node-uuid": "^1.4.7",
-    "pure-render-decorator": "^0.2.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",