Functional React.Js Execution flow
Tags: webdev, javascript, react, tutorial
Published: 2023-02-01 19:30:12

##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.