score:17

Accepted answer

ok. so here goes. if you have a simple structure with a parent and 2 children like this:

<parent>
  <child/>
  <child/>
</parent>

then the sequence of events firing will be:

  1. <parent> componentwillmount()
  2. <parent> render(), which starts to render children
  3. <child> componentwillmount() of the first child
  4. <child> render() of the first child
  5. <child> componentwillmount() of the second child
  6. <child> render() of the second child
  7. <child> componentdidmount() of the first child (these will start only after the last render in the tree has run)
  8. <child> componentdidmount() of the second child
  9. <parent> componentdidmount() (this one will run only after its last child has run componentdidmount)

you can find a codepen example here.


Related Query

More Query from same tag