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');
+ });
+ });
+});