React triggers remounting when we use function as react component ( <Renderer /> ). When we don't and run Renderer() it's okay

main.js

import React from 'react';
import * as ReactDOM from 'react-dom';


var root = {
   name: 'World',
   children: [
       {name: 'Sun', id:1},
       {
           name: 'Earth', id:2,
           children: [
               {name: 'Moon', id:3},
               {name: 'ISS', id:4},
           ]
       },
   ]
};

// function that returns stateless React component (i.e. just function)
// something like factory design pattern
function createRenderer(node, children) {
   return () => (<li>{node.name}<ul>{children}</ul></li>);
}

// represents node in tree
class Node extends React.Component {

  constructor(props) {
      console.log('node constructor');
      super(props);
      this.state = {node: props.node};
   }
   componentDidMount() {
       console.log('node did mount');
   }
   componentWillUnmount() {
       console.log('node will unmount')
   }
   render() {
       console.log("node render");
       var node = this.state.node;

       // calculate children markup
       var children = (node.children || []).map( ch => <Node key={ch.id} node={ch} />);

   	   var Renderer = createRenderer(node, children);

   	   // ****** HERE: ******
       //return Renderer();  // uncommment and it's okay.
       return <Renderer /> // when this executes there is unmounting-mounting
   }
}

var instance = ReactDOM.render(
        <Node node={root} />,
        document.getElementById('container')
);


setTimeout( () => {
    // state mutation
    root.children[0].name = 'Black Hole';
    // update
    instance.setState({node: root});
}, 2000);