Performance improvements (WIP) Addresses #427

Author: davidkpiano

examples/stress-test/app.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 
+window.React = require('react/lib/ReactWithAddons');
+
 import { Provider, connect } from 'react-redux';
 import {
   Control,
@@ -10,50 +12,42 @@ import {
 
 import store from './store.js';
 
-const UPDATE_ON = 'change';
+const UPDATE_ON = 'blur';
+
+class Rows extends Component {
+  constructor() {
+    super();
 
-const Rows = connect(({ rows }) => ({ rows }))(class extends Component {
-  constructor(props) {
-    super(props);
-    const { rows } = props;
+    const rows = Array(100).fill({
+        name: '',
+        email: '',
+        active: false,
+      });
 
     this.state = {
-      rendered: rows.map((row, i) =>
-            <tr key={i}>
-              <td>
-                <Control.text
-                  updateOn={UPDATE_ON}
-                  model={`rows[${i}].name`}
-    />
-              </td>
-              <td>
-                <Control.text
-                  updateOn={UPDATE_ON}
-                  model={`rows[${i}].email`}
-    />
-              </td>
-              <td>
-                <Field
-                  updateOn={UPDATE_ON}
-                  model={`rows[${i}].active`}
-    >
-                  <label>
-                    <input type="radio" value />
-                    Active
-                  </label>
-                  <label>
-                    <input type="radio" value={false} />
-                    Inactive
-                  </label>
-                </Field>
-              </td>
-            </tr>
-          ),
-    };
+      rows,
+      rendered: rows.map((row, i) => (
+        <tr key={i}>
+          <td>
+            <Control.text
+              updateOn={UPDATE_ON}
+              model={`rows[${i}].name`}
+              placeholder="Name"
+            />
+            <Control.text
+              updateOn={UPDATE_ON}
+              model={`rows[${i}].email`}
+              placeholder="Email"
+            />
+            <Control.checkbox
+              model={`rows[${i}].active`}
+            />
+          </td>
+        </tr>
+      )),
+    }
   }
   render() {
-    const { rows } = this.props;
-
     return (
       <section>
         <table>
@@ -64,7 +58,7 @@ const Rows = connect(({ rows }) => ({ rows }))(class extends Component {
       </section>
     );
   }
-});
+};
 
 class StressForm extends Component {
   render() {

examples/stress-test/store.js

@@ -6,7 +6,7 @@ import thunk from 'redux-thunk';
 import createLogger from 'redux-logger';
 import { combineForms } from 'react-redux-form';
 
-const initialState = Array(100)
+const initialState = Array(1000)
   .fill({
     name: '',
     email: '',

examples/webpack.config.js

@@ -37,8 +37,7 @@ module.exports = {
   plugins: [
     new webpack.optimize.CommonsChunkPlugin('shared.js'),
     new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
     })
   ]
-
 };

src/components/control-component.js

@@ -151,7 +151,7 @@ class Control extends Component {
 
   shouldComponentUpdate(nextProps, nextState) {
     const result =
-      !shallowEqual(this.props, nextProps, ['controlProps'])
+      !shallowEqual(this.props, nextProps, ['controlProps', 'mapProps'])
       || !shallowEqual(this.props.controlProps, nextProps.controlProps)
       || !shallowEqual(this.state.viewValue, nextState.viewValue);
 

src/utils/deep-compare-children.js

@@ -2,7 +2,7 @@ import React from 'react';
 import shallowCompare from 'react/lib/shallowCompare';
 import shallowEqual from './shallow-equal';
 
-function compareChildren(props, nextProps) {
+export function compareChildren(props, nextProps) {
   const { children } = props;
   const { children: nextChildren } = nextProps;
 

src/utils/resolve-model.js

@@ -1,4 +1,5 @@
 import React, { Component, PropTypes } from 'react';
+import shallowEqual from './shallow-equal';
 
 function resolveModel(model, parentModel) {
   if (parentModel) {
@@ -20,11 +21,15 @@ export default function wrapWithModelResolver(WrappedComponent) {
       super(props, context);
 
       this.model = context.model;
+
+      this.resolvedModel = null;
+    }
+    shouldComponentUpdate(nextProps) {
+      return !shallowEqual(this.props, nextProps);
     }
     render() {
-      const resolvedModel = resolveModel(
-        this.props.model,
-        this.model);
+      const resolvedModel = this.resolvedModel
+        || resolveModel(this.props.model, this.model);
 
       return <WrappedComponent {...this.props} model={resolvedModel} />;
     }