How React calculates and updates UI

[ad1992]

As far as I understand there are 3 internal phases in React and here is my rough understanding of what happens in each phase👇🏻

• Render Phase - React calculates the changes which are to be made to DOM.
• Pre-commit Phase - Read the changes from Virtual DOM.
• Commit Phase - Apply the change to the DOM.

Would love to know from the core team about the internal phases and how React calculates and updates UI!

[rachelnabors]

Hello!

It's really only two phases: render -> commit. Here's a diagram I made of when what is called:

Setting state kicks things off:

1. Render phase

• React calculates the changes (if any) need to be made to the DOM

2. Commit phase

• Run any useLayoutEffect() at browser layout
• Update DOM

3. Post Commit

• Then the browser paint happens.
• Finally, run any useEffect()

[ad1992]

Thanks for the explanation @rachelnabors 👍🏻, I had read it somewhere it has pre-commit phase but thank you for correcting me :)

[gaearon]

I think you’re referring to this: https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ (check “show advanced methods”).

It technically exists but the way we think about it now is that it’s really a part of the Commit phase. So it’s more that the Commit phase has several distinct passes inside of it. We don’t necessarily have “public” names for them, but currently in the source they’re called “before mutation” phase (getSnapshotForUpdate, no equivalent in Hooks yet), “mutation” phase (where DOM is updated), and “layout” phase (where we call layout effects). These may change or we may add more passes depending on new features.

[ad1992]

I think you’re referring to this: https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ (check “show advanced methods”).

Yep, that's right!

It technically exists but the way we think about it now is that it’s really a part of the Commit phase. So it’s more than the Commit phase has several distinct passes inside of it. We don’t necessarily have “public” names for them, but currently, in the source, they’re called “before mutation” phase (getSnapshotForUpdate, no equivalent in Hooks yet), “mutation” phase (where DOM is updated), and “layout” phase (where we call layout effects). These may change or we may add more passes depending on new features.

This is helpful, thanks for making it more clear 👍🏻

[markerikson]

To go along with what @rachelnabors wrote, I tried to describe React's current behavior in my post A (Mostly) Complete Guide to React Rendering Behavior. It has sections that describe what "rendering" is (asking a component to return elements to describe the desired UI), and a brief description of the "render" and "commit" phases.

[rachelnabors]

Dan recommended me to your post when I was making my doodle!

[markerikson]

Hah, great! (of course, I'm going to have to make a bunch of updates to it shortly to account for the React 18 behavior... :) )

[ad1992]

Awesome post @markerikson 💯

[rachelnabors]

It should be pointed out that function components don't really have "lifecycles," and "render and commit phases" are more useful to think about when you can perform operations (don't change state during render phase! Render must be pure!). Commit phase is all DOM and effects.

A component can have many render phases and never be committed. So thinking of these phases as part of a "lifecycle" isn't quite right ;) It's more like a structure for thinking about how React calculates and updates UI

[ad1992]

Yep 👍🏻 , made the edits in the Question