React: Detect when reconciliation has completed

[dakom]

Reading up on the Fiber architecture and Renderers in general - I'm not quite sure how to tell when reconciliation has completed. This is particularly important when rendering animation or targeting something other than the DOM

Let's consider, for example, a "ticker" root node that pushes changes on its children by setting state every requestAnimationFrame. If React has not finished reconciliation, this can quickly cascade into a mountain of pending updates. Therefore a reasonable strategy would be to "skip frames" (not set state) until reconciliation has definitively finished.

Naively, I tried doing this on a practical level by simply waiting for componentDidUpdate() on the root node and using that as a gate - assuming that it will not be called until all the children finished their render cycles (the children ultimately update canvas in componentWillReceiveProps() - and render null though I'm not sure if that's relevant)

I'm not sure if this is successful or not. Is there a simple way to measure?

More practically - and ideally even for a scenario where the children set there own state, is there a way to tell whether the tree as a whole has finished all reconciliation, or perhaps even from a particular node down?

[gaearon]

componentDidMount and componentDidUpdate always fire after the reconciliation has completed. But they may trigger another reconciliation by calling setState. Does this help?

[dakom]

Thank you, yes that answers this question - but triggers another :)

Do they also only fire after rendering has completed?

If so - how does that relate to the asynchronous scheduler?
If not - is there a way to detect when rendering has completed?

By rendering I mean of the entire tree (including whatever synchronous processing child nodes are doing in componentWillReceiveProps() )

[gaearon]

The asynchronous rendering may be potentially be interrupted or restarted many times. When the whole tree is ready, we start "committing". This is when we write to the DOM and then trigger *Did* lifecycles.

[dakom]

ok great, thanks - closing this for now :)