React: How can we know that all component has been mounted/rendered after setState()?

Question

In react a call to a component (R) 's setState() can trigger the re-render of all child components.

How can we know when that has finished ? Which lifecycle method is called after all the children of R have been mounted/rendered/updated ?

In more detail:

Let's consider the following situation:

There is a root component R, and its child components C1 and C2.

I would like to implement my own redux store where child components ( C1 and C2) can dispatch actions and AFTER all the children have been mounted/re-rendered/updated I would like to command the redux store to process the dispatched actions.

So I would need to know when all children have been rendered and schedule a call to the redux store that will command the store to process the dispatched actions.

Which lifecycle method is called after R's all children have been mounted/rendered/updated ?

Answer 1

Update: React has changed its lifecycle but in this case the method you need it's still the same. The new lifecycle is:

A) Mounting

1. constructor
2. static getDerivedStateFromProps
3. render
4. componentDidMount

B) Updating (includes both, props and state)

1. static getDerivedStateFromProps
2. shouldComponentUpdate
3. render
4. getSnapshotBeforeUpdate
5. componentDidUpdate

---

OLD ANSWER

ComponentDidUpdate will do what you say. It is launched right after a render because of props changes or a render because of state changes.

Life Cycle:

A) Mounting

1. Constructor
2. ComponentWillMount
3. Render
4. ComponentDidMount

B) Props Changes

1. ComponentWillReceiveProps
2. ShouldComponentUpdate
3. Render
4. ComponentDidUpdate

C) State Changes

1. ShouldComponentUpdate
2. ComponentWillUpdate
3. Render
4. ComponentDidUpdate

More information: https://reactjs.org/docs/react-component.html#componentdidupdate

Answer 2

I think you are looking for the componentDidUpdate lifecycle event. https://facebook.github.io/react/docs/react-component.html#componentdidupdate

It is triggered when the component is being updated (and that all its children are updated too).

⚠ this event is not triggered on the very first render. If you also need to handle to first render, you will have to use both componentDidUpdate and componentDidMount