How does React split DOM updates and browser paints?

Question

This is the sequence of tasks as I understand:

1. render,
2. reconcile,
3. update DOM,
4. call layout effects
5. browser paint
6. call effects

When I make a change to the DOM like titleRef.current.innerText = 'Hello', the change seems to instantaneous on the browser. There seems to be no difference between a DOM update and a browser paint.

So, how does React split a DOM update from a browser paint? Looked at the source code but could not understand much.

Answer 1

Here is the lifecycle of a react component:

1. Run lazy initializers
2. Run rest of the code other than hooks.
3. Create or update virtual dom (here the virtual dom is updated)
4. cleanup of useLayouteffect (unmount stage)
5. useLayoutEffect().
6. Browser paints the screen (real dom is updated)
7. cleanup of useEffect (unmount stage)
8. useEffect().

FlowChart Link: https://github.com/donavon/hook-flow