render-mount.js

import React from 'react';
import { render } from 'react-dom';

class Child extends React.Component {
  componentDidMount() {
    if (this.props.n === 0) {
      console.log(`child mounted at ${Date.now()}`)
    }
  }

  render() {
    const { n } = this.props
    if (n >= 1) {
      return <Child n={n - 1} />
    } else {
      console.log(`child rendered at ${Date.now()}`)
      return null
    }
  }
}

class Parent extends React.Component {
  componentDidMount() {
    console.log(`parent mounted at ${Date.now()}`)
  }

  render() {
    console.log(`parent rendered at ${Date.now()}`)
    return <Child n={this.props.n} />
  }
}

render(<Parent n={10000} />, document.getElementById('root'));


// parent rendered at 1520999001267
// child rendered at 1520999001327
// child mounted at 1520999001364
// parent mounted at 1520999001373