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?
componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render. Use this as an opportunity to operate on the DOM when the component has been updated.
The componentDidUpdate() hook is used to trigger an action once we find an update in the component, but make sure this hook method does not get called at the time of the initial render of the component.
The componentDidUpdate()is called after componentDidMount() and can be useful to perform some action when the state of the component changes. Parameters: Following are the parameter used in this function: prevProps: Previous props passed to the component.
componentDidMount() only runs once after the first render. componentDidMount() may be called multiple times if the key prop value for the component changes. componentDidMount method is used for handling all network requests and setting up subscriptions during the mounting phase.
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 render
s have completed.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With