reactjs - making correct sense of reconciliation -

i've written small react/redux based app (github). based on swagger-ui redux system. made tree-like data , rendered out on ui.

warning: redux system might take time used to. not traditional. quasi plugin-based architecture.

so tree-view component acts on following data -> https://github.com/deostroll/reduxmin3/blob/master/dev-helpers/data/sample.json

the code tree-view follows:

export default class treeview extends react.component {      shouldcomponentupdate(nextprops, nextstate) {         if (this.previousstate) {             let {layoutselectors } = nextprops             let prevvalue = this.previousstate.expand             let currentvalue = layoutselectors.isexpanded(this.previousstate.path)             console.log('path:', this.previousstate.path.join('.'), 'result:', currentvalue !== prevvalue)             return currentvalue !== prevvalue         }         return false     }      setvisibility = (flag) => {         // console.log('foo')         let { _path, layoutactions } = this.props         if (flag) {             layoutactions.show(_path)         }         else {             layoutactions.hide(_path)         }      }      renderchild() {         // console.log('render child')         let { _path, _tree, dataselectors, getcomponent, layoutselectors } = this.props         console.log('render:', _path.join('.'))         let data = _tree.getin(_path)         // console.assert(data, path)         let paras = data && data.get ? (data.get("paras") ? data.get("paras") : undefined) : undefined          let expand = layoutselectors.isexpanded(_path)          let childcount = dataselectors.childcount(_path)         // console.log({path: _path, count: childcount, data: data})         this.previousstate = {             path: _path,             expand: expand         }         let treeview = getcomponent("treeview")         // console.log('path:', _path, 'haschildren:', haschildren)         // layoutselectors.isroot(_path)         let hide = () => this.setvisibility(false)         let show = () => this.setvisibility(true)         return (             <div classname={ `child ${ _path.length === 1 ? "root" : "" }`}>                 { data && data.get && data.get("title") ? <h3>{data.get("title")}</h3> : null }                 <small>children count:  { childcount }</small>                 {                      childcount ? <div classname="btn-toolbar" role="toolbar">                                     <div classname="btn-group" role="group">                                             <button type="button" classname="btn btn-default btn-xs" onclick={ show }>                                                 <span classname="glyphicon glyphicon-eye-open"></span>                                             </button>                                             <button type="button" classname="btn btn-default btn-xs" onclick={ hide }>                                                 <span classname="glyphicon glyphicon-eye-close"></span>                                             </button>                                         </div>                                     </div>                                  : null                 }                   {                     (expand && paras) ? paras.map((obj, key) => {                         let thispath = _path.concat("paras", key)                         return <treeview _path={ thispath } _tree={ _tree } key={ `-${thispath.join('.')}` }/>                     }) : null                 }             </div>         )     }       renderroot() {         // console.log('render root')         // console.log(this.props)         let { getstate, getcomponent } = this.props         let data = getstate().get("data")         let tv = getcomponent("treeview")         return (             <div>                 {                     data.map( (subtree, key) => {                         return (                             <tv _path={ [key] } _tree={ data } key={ `-${key}` } />                         )                     })                 }             </div>         )     }      render() {         let { _path, _tree } = this.props          let isroot = () => !_path && !_tree          if (isroot()) {             return this.renderroot()         }         else {             return this.renderchild()         }     } } 

the shouldcomponentupdate logs stuff. render. when page loaded see this: shouldcomponentupdate code didn't execute since first render - expected. logs show follows:

render app render: 0 render: 1 render: 2 render: 3 

now i'll share output when want see children of first item, , first sub item respectively:

#first item click render app path: 0 result: true render: 0 render: 0.paras.0 render: 0.paras.1 render: 0.paras.2 render: 0.paras.3 render: 0.paras.4 path: 1 result: false path: 2 result: false path: 3 result: false  #first sub item click render app path: 0 result: false path: 1 result: false path: 2 result: false path: 3 result: false path: 0.paras.0 result: true render: 0.paras.0 render: 0.paras.0.paras.0 render: 0.paras.0.paras.1 render: 0.paras.0.paras.2 path: 0.paras.1 result: false path: 0.paras.2 result: false path: 0.paras.3 result: false path: 0.paras.4 result: false 

observations:

1. on first item click - should component update of tree-view @ level shows true , children renders. expected.
2. on sub item click - should component update of parent returns false, children renders - this don't understand...!!! (path: 0 result: false, path: 0.paras.0 result: true)