Created PureDeepRenderMixin to help keep render times fast

Author: STRML

lib/GridItem.jsx

@@ -3,10 +3,11 @@ var React = require('react/addons');
 var utils = require('./utils');
 var Draggable = require('react-draggable');
 var Resizable = require('react-resizable').Resizable;
+var PureDeepRenderMixin = require('./PureDeepRenderMixin');
 
 var GridItem = module.exports = React.createClass({
   displayName: 'GridItem',
-  mixins: [React.addons.PureRenderMixin],
+  mixins: [PureDeepRenderMixin],
 
   propTypes: {
     // General grid attributes

lib/PureDeepRenderMixin.js

@@ -0,0 +1,12 @@
+'use strict';
+var deepEqual = require('deep-equal');
+
+// Like PureRenderMixin, but with deep comparisons.
+var PureDeepRenderMixin = {
+  shouldComponentUpdate: function(nextProps, nextState) {
+    return !deepEqual(this.props, nextProps) ||
+           !deepEqual(this.state, nextState);
+  }
+};
+
+module.exports = PureDeepRenderMixin;

lib/ReactGridLayout.jsx

@@ -2,10 +2,12 @@
 var React = require('react/addons');
 var GridItem = require('./GridItem.jsx');
 var utils = require('./utils');
+var PureDeepRenderMixin = require('./PureDeepRenderMixin');
+
 
 var ReactGridLayout = module.exports = React.createClass({
   displayName: 'ReactGridLayout',
-  // mixins: [React.addons.PureRenderMixin],
+  mixins: [PureDeepRenderMixin],
 
   propTypes: {
     // If true, the container height swells and contracts to fit contents
@@ -235,9 +237,15 @@ var ReactGridLayout = module.exports = React.createClass({
   placeholder() {
     if (!this.state.activeDrag) return '';
 
+    // {...this.state.activeDrag} is pretty slow, actually
     return (
       <GridItem
-        {...this.state.activeDrag}
+        w={this.state.activeDrag.w}
+        h={this.state.activeDrag.h}
+        x={this.state.activeDrag.x}
+        y={this.state.activeDrag.y}
+        i={this.state.activeDrag.i}
+        placeholder={true}
         className="react-grid-placeholder"
         containerWidth={this.state.width}
         cols={this.state.cols}
@@ -266,7 +274,11 @@ var ReactGridLayout = module.exports = React.createClass({
     var moveOnStartChange = drag && drag.i === i ? false : true;
     return (
       <GridItem 
-        {...l}
+        w={l.w}
+        h={l.h}
+        x={l.x}
+        y={l.y}
+        i={l.i}
         containerWidth={this.state.width}
         cols={this.state.cols}
         margin={this.props.margin}

package.json

@@ -29,6 +29,7 @@
   },
   "homepage": "https://github.com/STRML/react-grid-layout",
   "dependencies": {
+    "deep-equal": "^0.2.1",
     "react-draggable": "strml/react-draggable",
     "react-resizable": "^0.0.3"
   },

test/TestLayout.jsx

@@ -10,6 +10,7 @@ require('style!css!../node_modules/react-resizable/css/styles.css');
 
 var TestLayout = module.exports = React.createClass({
   displayName: 'TestLayout',
+  mixins: [React.addons.PureRenderMixin],
 
   getDefaultProps() {
     return {

webpack-dev-server.config.js

@@ -20,6 +20,11 @@ module.exports = {
     },
     plugins: [
       new webpack.optimize.DedupePlugin(),
+      new webpack.DefinePlugin({
+        "process.env": {
+          NODE_ENV: JSON.stringify('development')
+        }
+      }),
     ],
     debug: true,
     devtool: "#inline-source-map",