An example for a self "rerendering" JSON component which allows you to build JSON objects which could update themselves in the component tree

MyComponent.js

function compare(left, right){
  return left.val === right.val;
}

function render(props){
  const objVal = {
    ...props,
    setProps: (newProps) => {
      if(!compare(props, newProps)) {
        this(newProps);
      }
    }
  }
  return objVal;
}

function rerender(ctx, fn){
  const ref = {}
  ref.fn = (props) => {
    ctx.value = fn.call(ref.fn, props)
  }
  return ref.fn;
}

function MyComponent(renderFn, props){
  rerender(this, renderFn)(props);
}

MyComponent.prototype = {
  touch: function(props) {
    this.value.setProps(props);
  },  
  touchChild : function(props) {
    this.value.children[1].touch(props);
  },
  print : function() {
    console.log(this.value)
  }
}

function testSimpleCase(){
  const test = new MyComponent(render, { 
    val: 1
  });

  test.print();
  test.touch({ val: 4 });
  test.print();  
}

function testNestedCase() {
  const test = new MyComponent(render, { 
    val: 1,
    children: [
      2,
      new MyComponent(render, { val: 3 })
    ]
  });

  test.print();
  test.touchChild({ val: 4 });
  test.print();
}

testSimpleCase();

Just playing around with ideas on how one might build a JSON tree with self rebuilding objects which might come in handy for a server side component based library for JSON APIs