Will look at that, thanks!

A quick note, there seems to be some words missing at the end of the sentence where it says “Commit phase is where actual DOM mutations and effect flushing (useEffect)”. Should there be a “take place” or “happen” at the end?

Cheers!

Hi @Teng, thank you very much for clearing the confusion.
I have a couple of more questions:

1. You have written that “the entire React’s component lifecycle can be roughly divided into 3 phases: Trigger → Render → Commit”. But aren’t those three phases: Mounting -> Updating -> Unmounting? Are the former different from the latter ones?

2. How many total Fiber Trees/DOM Trees will be created?

If you observe the way Fiber tree is traversed, you will notice that its going from to , then starts committing phase from to and then it goes to

Hi, author here. Let me help clarify a few things.

As mentioned in the article, in React, component rendering and effect committing happen in completely separate phases. The former occurs during the render phase, and the latter during the commit phase. They are separate walks, but the traversal algorithm is similar.

During the render phase, React traverses the fiber tree and renders the necessary components — which is why logs like “Xxx is rendered” appear first.

After that, in the commit phase, React traverses the fiber tree again to commit effects (i.e. your useEffect callbacks), which is why logs like “Xxx committed effect” appear later.

That’s why the logging order ends up like this:
Parent is rendered
Child is rendered
ParentSibling is rendered
Child committed effect
Parent committed effect
ParentSibling committed effect

Feel free to try it out using this link (https://codesandbox.io/p/sandbox/focused-cdn-32fkpx)

Regarding the animated image, it is only showing the commit phase traversal. I intentionally skipped the render phase traversal because this article is all about useEffect, and I wanted to avoid unrelated diagrams. Apologies for the confusion!

As I got form the article this part: “Nothing happens in the first step, but in the second step, it commits effects.”

That committing the effect only happened in the committing step while rendering the body of the component (logs out of the effect) should happen first.

Parent is rendered
Child is rendered

Child committed effect
Parent committed effect

ParentSibling is rendered
ParentSibling committed effect

PS: The animated image traverses nodes only this way. Am I correct?