Difference Between Render Phase and Commit Phase.

In React, you’ve heard these two different terminologies, Render Phase
and Commit Phase, which sound similar, right? But they are different,
so can you tell what the difference between them is?

There is a big difference in their work too. Knowing these terminologies
helps you understand React's internals.

Firstly, let's pick the Render Phase.

React uses reconciliation and the Fiber tree to determine the updates.
This includes calling components, processing updates, and reconciling
the resulting elements.

Now, when a state update happens because of user interaction, React
performs rendering work to figure out what the UI should look like.
It uses the Fiber tree to track this work. Depending on the situation,
React may repeat or interrupt the render work.

Now, reconciliation helps React determine what changes are needed in
the UI by comparing the new elements with the existing Fiber tree.

This process of figuring out what the UI should look like and what
changes are needed is called the Render Phase.

To apply these changes to the Host DOM, the process passes to the
Commit Phase.

It works by inserting, updating, or deleting DOM nodes in the Host DOM
and applying the necessary DOM properties.

After the Render Phase determines the necessary changes, the Commit
Phase applies them to the Host DOM, and we see the UI update.

In simple terms, determining the changes is the work of the Render
Phase, and applying those changes is the work of the Commit Phase.

Now, one question comes from this process: Are React's reconciliation
and the browser's layout or compositing separate processes?