Respect path changes in Component shouldComponentUpdate (#388) (#389)

* add update on path change test

* respect path changes in Component `shouldComponentUpdate` method (#388)

* add `isArraysDiffers` util

* compare path array by value instead of reference

* rename `isArraysDiffers` -> `isArraysShallowDiffers`

package.json

@@ -51,6 +51,7 @@
     "karma-webpack": "1.7.0",
     "react": "^15.0.0",
     "react-dom": "^15.0.0",
+    "react-test-renderer": "^15.5.4",
     "tape": "4.0.0",
     "webpack": "1.12.8"
   },

src/components.js

@@ -8,7 +8,8 @@ import {
   move,
   UIDGenerator,
   getTypeFromUnion,
-  getComponentOptions
+  getComponentOptions,
+  isArraysShallowDiffers
 } from './util'
 
 const Nil = t.Nil
@@ -116,17 +117,18 @@ export class Component extends React.Component {
   }
 
   shouldComponentUpdate(nextProps, nextState) {
+    const { props, state } = this
+    const nextPath = Boolean(nextProps.ctx) && nextProps.ctx.path
+    const curPath = Boolean(props.ctx) && props.ctx.path
+
     const should = (
-      nextState.value !== this.state.value ||
-      nextState.hasError !== this.state.hasError ||
-      nextProps.options !== this.props.options ||
-      nextProps.type !== this.props.type
+      nextState.value !== state.value ||
+      nextState.hasError !== state.hasError ||
+      nextProps.options !== props.options ||
+      nextProps.type !== props.type ||
+      isArraysShallowDiffers(nextPath, curPath)
     )
-    // console.log(nextState.value !== this.state.value,
-    //   nextState.hasError !== this.state.hasError,
-    //   nextProps.options !== this.props.options,
-    //   nextProps.type !== this.props.type,
-    //   should)
+
     return should
   }
 

src/util.js

@@ -173,3 +173,23 @@ export function getComponentOptions(options, defaultOptions, value, type) {
   }
   return opts
 }
+
+export function isArraysShallowDiffers(array, other) {
+  if (array === other) {
+    return false
+  }
+
+  const { length } = array
+  if (length !== other.length) {
+    return true
+  }
+
+  let index = -1
+  while (++index < length) {
+    if (array[index] !== other[index]) {
+      return true
+    }
+  }
+
+  return false
+}

test/components/Component.js

@@ -1,5 +1,7 @@
 import tape from 'tape'
+import React from 'react'
 import t from 'tcomb-validation'
+import ShallowRenderer from 'react-test-renderer/shallow'
 import { Component, getComponent } from '../../src/components'
 import { ctx } from './util'
 
@@ -222,4 +224,43 @@ tape('Component', ({ test }) => {
       'myid',
       'should return the provided id')
   })
+
+  test('re-render on path change', (assert) => {
+    assert.plan(2)
+
+    let renderCallsNum = 0
+
+    class TestComponent extends Component {
+      render() {
+        renderCallsNum++
+        return null
+      }
+    }
+
+    const renderer = new ShallowRenderer()
+
+    const baseProps = {
+      options: {},
+    }
+    const elementA = React.createElement(TestComponent, {
+      ...baseProps,
+      ctx: {
+        ...ctx,
+        path: ['foo']
+      }
+    })
+    const elementB = React.createElement(TestComponent, {
+      ...baseProps,
+      ctx: {
+        ...ctx,
+        path: ['bar']
+      }
+    })
+
+    renderer.render(elementA)
+    assert.strictEqual(renderCallsNum, 1, '#1.1')
+
+    renderer.render(elementB)
+    assert.strictEqual(renderCallsNum, 2, '#1.2')
+  })
 })

test/util.js

@@ -1,5 +1,5 @@
 import tape from 'tape'
-import { humanize, move } from '../src/util'
+import { humanize, move, isArraysShallowDiffers } from '../src/util'
 
 tape('util', ({ test }) => {
   test('humanize', (assert) => {
@@ -15,4 +15,21 @@ tape('util', ({ test }) => {
     assert.strictEqual(initial, actual)
     assert.deepEqual(actual, expected)
   })
+
+  test('isArraysShallowDiffers', (assert) => {
+    assert.plan(4)
+
+    const array = ['foo', 1]
+    let other = ['bar', 1]
+    assert.equal(isArraysShallowDiffers(array, other), true)
+
+    other[0] = 'foo'
+    assert.equal(isArraysShallowDiffers(array, other), false)
+
+    other.push('baz')
+    assert.equal(isArraysShallowDiffers(array, other), true)
+
+    other = array
+    assert.equal(isArraysShallowDiffers(array, other), false)
+  })
 })