React: Wait until all childs are avaiable and call a function once afterwards

Question

Solved, See UPDATE below. You can use this code as reference to implement something simillar

---

Lets say I have a parent react component (ES6):

Parent

import ChildDiv from './ChildDiv'

export default React.createClass({
  displayName: 'ParentDiv',

  getInitialState () {
    nodesLoadedToCanvas: 0,
    workedOnParentOnceAfterAllChildrenWereLoaded: false
  },

  onChildNodeDidMount () {
    let nodeCount = this.state.nodesLoadedToCanvas + 1
    this.state.nodesLoadedToCanvas = nodeCount
    console.log('Mount ' + this.state.nodesLoadedToCanvas + ' nodes so far')
  },

  render () {
    const {children} = this.props // 'children' is a model collection

    return (
      <div id='ParentDiv'>
      {children.map((childDiv) => 
        <ChildDiv data={childDiv} key={childDiv.id} onRender={this.onChildNodeDidMount}/>
      )}
      </div>
    )
  },

  componentDidMount () {
    console.log('Parent did mount')
  },

  componentDidUpdate () {
    let allNodesArePresent = (this.state.nodesLoadedToCanvas === this.props.children.length)
    if (!this.state.workedOnParentOnceAfterAllChildrenWereLoaded) {
      console.log('Do something')
      this.state.workedOnParentOnceAfterAllChildrenWereLoaded= true
    }
  }
})

And a child-component like this

Child

export default React.createClass({
  displayName: 'ParentDiv',

  render () {
    const {data} = this.props

    return (
      <div id='ParentDiv'>
        data.name
      </div>
    )
  },

  componentDidMount () {
    console.log('ChildDiv did mount')
    this.props.onRender() // tell parent that child did mount
  },

  componentDidUpdate () {
  }
})

Why is my console saying

Parent did Mount
ChildDiv did Mount
ChildDiv did Mount
ChildDiv did Mount

And not

ChildDiv did Mount
ChildDiv did Mount
ChildDiv did Mount
Parent did Mount

?

How can I make react call a function after the full parent (and all it's childs) are rendered?

UPDATE

I solved this with the Input of @nash_ag by adding a onRender={this.onChildNodeDidMount} Parameter to my tag (see above), call the function in ChildDiv in componentDidMount() and can now decide if all nodes were loaded in my parents componentDidUpdate() method. I updated my code above.

Answer 1

You can probably use the componentDidUpdate() to check if all the children are finished, as this is called every time you render a dynamic child.

Once the last one is received (comparison from props), you can then go ahead with the further processing.