add pure render optimization

- cache generated input change handlers in order to prevent
re-rendering of pure render input components

Author: akuzko

src/Form.jsx

@@ -1,6 +1,6 @@
 import { PropTypes, PureComponent, Component } from 'react';
 
-import { update, buildFormValidator, noop } from './utils';
+import { update, noop, buildFormValidator, buildHandlersCache } from './utils';
 import get from 'lodash.get';
 
 export default class Form extends (PureComponent || Component) {
@@ -26,6 +26,7 @@ export default class Form extends (PureComponent || Component) {
   state = { errors: {} };
   validations = {};
   validator = buildFormValidator(this);
+  cache = buildHandlersCache();
 
   componentWillReceiveProps() {
     if (this._nextErrors) {
@@ -46,14 +47,19 @@ export default class Form extends (PureComponent || Component) {
   }
 
   $(name) {
+    const handler = this.cache.fetch(name, () => this.set.bind(this, name));
+
     const wrapper = (handler, ...bindings) => {
-      wrapper.onChange = handler.hasOwnProperty('prototype') ? handler.bind(this, ...bindings) : handler;
+      wrapper.onChange = this.cache.fetch([name, handler, ...bindings], () => {
+        return handler.hasOwnProperty('prototype') ? handler.bind(this, ...bindings) : handler;
+      });
+
       return wrapper;
     };
     Object.defineProperty(wrapper, 'name', { value: name, enumerable: true });
     Object.assign(wrapper, {
       value: this.get(name),
-      onChange: this.set.bind(this, name),
+      onChange: handler,
       error: this.getError(name)
     });
 

src/utils.js

@@ -1,3 +1,4 @@
+/* global WeakMap */
 import set from 'lodash.set';
 
 export function noop(){}
@@ -11,7 +12,7 @@ export function bindState(component, key = 'form') {
 
 export function update(obj, name, value) {
   _update(obj, name, value);
-  
+
   return obj;
 }
 
@@ -118,3 +119,66 @@ export function buildFormValidator(form) {
 
   return validate;
 }
+
+export function buildHandlersCache() {
+  return new Cache;
+}
+
+class Cache {
+  constructor() {
+    this.store = {};
+  }
+
+  fetch(key, setter) {
+    try {
+      if (Array.isArray(key)) {
+        return this.fetchComplex(key, setter);
+      } else {
+        return this.fetchSimple(key, setter);
+      }
+    } catch (_e) {
+      return setter();
+    }
+  }
+
+  fetchSimple(key, setter) {
+    if (this.store[key]) {
+      return this.store[key];
+    } else {
+      this.store[key] = setter();
+      return this.store[key];
+    }
+  }
+
+  fetchComplex([name, ...path], setter) {
+    name = `_${name}`;
+    let current = this.store[name] || (this.store[name] = new WeakMap);
+
+    for (let i = 0; i < path.length - 1; i++) {
+      if (typeof this.get(current, path[i]) == 'undefined') {
+        const nextKey = path[i + 1];
+        this.put(current, path[i], typeof nextKey === 'number' || typeof nextKey === 'string' || typeof nextKey === 'boolean' ? {} : new WeakMap);
+      }
+      current = this.get(current, path[i]);
+    }
+    const key = path[path.length - 1], cached = this.get(current, key);
+    return cached || this.put(current, key, setter());
+  }
+
+  get(store, key) {
+    if (store.constructor === WeakMap) {
+      return store.get(key);
+    } else {
+      return store[key];
+    }
+  }
+
+  put(store, key, value) {
+    if (store.constructor === WeakMap) {
+      store.set(key, value);
+    } else {
+      store[key] = value;
+    }
+    return value;
+  }
+}

test/utils.test.js

@@ -1,14 +1,14 @@
 import React, { Component } from 'react';
 import Form from '../src/Form';
-import { bindState, updated } from '../src/utils';
+import { bindState, updated, buildHandlersCache } from '../src/utils';
 import { shallow } from 'enzyme';
 import expect from 'expect';
 
 describe('updated', function() {
   it('carefully sets deeply nested item: deeply nested array', function() {
     const obj = { foo: { bar: { baz: [1, 2, 3] } }, bak: { big: 1 } };
     const upd = updated(obj, 'foo.bar.baz.1', 4);
-    
+
     expect(obj === upd).toBe(false, 'obj should not be updated in place');
     expect(obj.foo === upd.foo).toBe(false, 'obj.foo should not be updated in place');
     expect(obj.foo.bar === upd.foo.bar).toBe(false, 'obj.foo.bar should not be updated in place');
@@ -20,7 +20,7 @@ describe('updated', function() {
   it('carefully sets deeply nested item: deeply nested object', function() {
     const obj = { foo: { bar: [{ baz: 'baz1' }, { baz: 'baz2' }] }, bak: { big: 1 } };
     const upd = updated(obj, 'foo.bar.1.baz', 'baz3');
-    
+
     expect(obj === upd).toBe(false, 'obj should not be updated in place');
     expect(obj.foo === upd.foo).toBe(false, 'obj.foo should not be updated in place');
     expect(obj.foo.bar === upd.foo.bar).toBe(false, 'obj.foo.bar should not be updated in place');
@@ -32,7 +32,7 @@ describe('updated', function() {
   it('carefully sets deeply nested item, path collections are not defined', function() {
     const obj = { bak: { big: 1 } };
     const upd = updated(obj, 'foo.bar.baz.1', 4);
-    
+
     expect(obj.bak === upd.bak).toBe(true, 'obj.bak should not be cloned');
     expect(upd.foo.bar.baz).toMatch([undefined, 4], 'value under desired name should be updated');
   });
@@ -80,3 +80,25 @@ describe('bindState', function() {
     expect(wrapper.state()).toEqual({ form: { foo: 'bar' } });
   });
 });
+
+describe('buildHandlersCache', function() {
+  context('simple case', function() {
+    it('fetches result and caches it', function() {
+      const cache = buildHandlersCache();
+      const result = cache.fetch('foo', () => ({}));
+      expect(cache.fetch('foo', () => 'is not called') === result).toBe(true);
+    });
+  });
+
+  context('complex case', function() {
+    it('fetches result and caches it', function() {
+      const cache = buildHandlersCache();
+      const fn = function(){};
+      const obj = {};
+      const result = cache.fetch(['foo', fn, 1, obj, 5], () => fn);
+
+      expect(result).toBe(fn, 'sets result according to setter');
+      expect(cache.fetch(['foo', fn, 1, obj, 5], () => 'is not called') === result).toBe(true, 'returns cached value properly');
+    });
+  });
+});