Functional React.Js Execution flow

Table of Content

• What is ReactJs
• ReactJs Life Cycle
• ReactJs Flow

1. What is ReactJs

ReactJs is a JavaScript declarative UI library that makes it easier to create performant front-end applications.

2. ReactJs Life Cycle

ReactJs life cycle consists of:

• Mounting: this is the first time a component gets painted into the virtual DOM and then the actual DOM.

• Updating: this is when a component gets updated into the virtual DOM(using the diffing algorithm) and then gets injected into the actual DOM(using the reconciliation algorithm). This is what causes RERENDER but doesn't cause REMOUNT. usually caused by a component state update, component props update or a component parent update(that is when a wrapper component updates, the wrappedChildComponent gets re-rendered also).

• Unmounting: this is the phase when a component gets removed from the virtual DOM and then gets removed from the actual DOM too. e.g when we navigate to another path, the previous path component gets unmounted.

Keywords to take note of:

• Mounting: I mean the first time a component gets constructed into the virtual DOM.
• Update: I mean when a component gets updated in the Virtual DOM.
• Unmounting: when a component gets removed from the Virtual DOM.

3. ReactJs Flow:

I will break this into 8 phases for better understanding:

1. Virtual DOM construction: this is the phase where ReactJs program constructs the virtual DOM for the FIRST TIME.

How is the virtual DOM constructed

• It takes the returned element from a component(i mean the ReactElement) and then maps each element object hierarchically with a unique key attached to them.
• If any Element object uses the component prop or state, the initial value of them will be present in the virtual DOM.

2. After Virtual DOM construction: this is the phase when the virtual DOM has just been constructed for the first time. And this is the phase when your useLayoutEffect runs

3. Actual DOM construction: this is the phase when React takes the content of the virtual DOM and injects it into the actual DOM.

4. After Actual DOM construction: this is the phase when the actual DOM construction has just finished. At this phase is when the useEffect gets to run. And that is why when you have a code let's say a setState in useLayoutEffect and useEffect, that of useEffect update will replace the update of useLayoutEffect after a successful run.

5. Virtual DOM update: this is the phase when the virtual DOM needs to be updated because a component and its returned element object have been updated.
Note: an update to virtual DOM is an update to actual DOM. If nothing new changes in your component, virtual DOM will not update thanks to ReactJs diffing algorithm.

what causes the virtual DOM to update?

• When a component state which is used "by a returned element" gets updated
• When component props which are used "by a returned element" get updated
• A parent component gets updated and the child component is not memoized(React.memo)

How virtual dom is updated?

ReactJs program doesn't just take the returned element object of a component to update the old virtual DOM content. But rather, it tries to check if the incoming object has different content from the current one and it only changes the new part e.g it picks the prop that has changed. And this whole process is termed the "diffing process".

6. After Virtual DOM update: useLayoutEffect runs

7. Actual DOM update: at this phase, ReactJs doesn't just take the virtual DOM content and inject it into the actual DOM. But rather, it uses what we call the "reconciliation algorithm" to determine the node that needs to be updated in the actual DOM and then it updates only the changed part.

8. After the Actual DOM update: this is the phase when the useEffect gets run.