Does componentDidUpdate run after all children have been updated?

Question

I would like to know if a React component's lifecycle method componentDidUpdate gets executed after all of the children's render methods have finished, or right after the render method for that component is called.

Since the reconciler recursively calls render method to update the view, I have a hunch that componentDidUpdate gets executed after all children of a component has been re-rendered, but there was not enough information in the documentation. When exactly is componentDidUpdate called?

Answer 1

The componentDidUpdate method is called after the render method of the component is done executing. That means that it will be called after all children's render methods have finished. This is implied in the documentation you linked:

Use this as an opportunity to operate on the DOM when the component has been updated.

The component is only updated post-render, so the documentation implies that it's called after all children, and consequently the parent, have finished rerendering (albeit a bit unclear). You can only really operate on the DOM when it finishes updating, children and all.

For example, say we have two components, A and B and B renders a A component. componentDidUpdate for B will only be called once B's render finishes. The render of B will finish after A's render is successfully called because children are rendered first due to being part of the parent. That means the answer to your question is: componentDidUpdate is executed after all the children's renders have completed.

Answer 2

Not sure if there is more in-depth documentation somewhere, but it is indeed easy enough to test on your own.

class Nested extends React.Component {
  constructor(props){
    super(props);
    this.state = {foo: undefined};
  }
  render() {
    console.log("Rendered " + this.props.name);
    return <div><button onClick={() => {this.setState({foo: Date.now()})}}>Update {this.props.name}</button>{this.props.children ? React.cloneElement(React.Children.only(this.props.children), {foo: this.state.foo}) : undefined}</div>
  }
  componentDidUpdate() {
    console.log("Updated " + this.props.name);
  }
}

ReactDOM.render(<Nested name="outer"><Nested name="inner"></Nested></Nested>, document.getElementById("app"));

http://jsbin.com/yiyuhegayo/edit?js,console,output

Updating the outer component results in the innermost componentDidUpdate running first, and then the outermost. Updating the inner component only causes that component to update.

Interestingly, it is the opposite for the render functions. The outer component renders first, then the inner one.