React Fiber

Before we start,

Restructuring the code

Make different files for each component .

Don’t add hardcoded data in the component files, make different utility folder for that.

Now to use these components in the main app.js file or in other components files, we have to export the component from its file and import it in the file where we have to use it.

Now there are two types of exports:

• Default Export

A file can have only one default export so we use it in files in which we have to export only one component.

Syntax to export the default export: export default componentName;

Syntax to import the default export: import componentName from “path”;

• Named Export

They are used when more than one component is to be exported from the same file.

Syntax to export the named export: export const componentName = " " ;

Syntax to import the named export: import {componentName} from “path”;

Hooks

Hooks are just normal prebuilt JS utility functions given by React.

They are imported the way we import named export.
import { useState } from “react” ;

useState React Hook

const [ A , setA ] = useState([]);

It creates a state variable ( A ) which is called so because it maintains the state of the component.

whatever we pass in the useState , becomes the default value of the state variable.

setA updates the state variable A.

Whenever the state variable changes or updates ( whenever the setA is called ) , react re-renders the component.

---

Why is React so fast ?

React is fast because it does fast and efficient DOM manipulation.

React keeps the data layer in sink with the UI layer by re-rendering the moment a change in data occurs.

React is able to do fast DOM manipulation due to its algorithm of React Fiber.

React Fiber (Reconciliation algorithm)

React Fiber is a complete rewrite of React's core reconciliation algorithm, aiming to improve performance and responsiveness.

Prerequisites

• Virtual DOM
  In React, the Virtual DOM is a lightweight, in-memory representation of the real DOM (Document Object Model). It's a JavaScript object that mirrors the structure of the actual DOM, acting as a blueprint for the UI.
  When we console.log a react component, we get an object which is basically the virtual DOM

• Reconciliation

  The algorithm React uses to differentiate one tree (virtual dom) with another to determine which parts need to be changed.
  This process of finding out the changes to be done by analysing the old and new DOM tree is called diffing.

• Update

  A change in the data used to render a React app. Usually the result of setState. Eventually results in a re-render.

Process

Step 1 : Initial Render
When a component renders, React creates a corresponding Virtual DOM tree.

Step 2 :Updates
When a component's state or props change, React re-renders the component, creating a new Virtual DOM tree.

Step 3 : Diffing
React compares the new Virtual DOM tree with the previous one, identifying the differences. This process is called "diffing".

Step 4: Reconciliation
React updates the real DOM only with the changes identified in the diffing process, minimizing the number of actual DOM manipulations.

The reconciler does the work of computing which parts of a tree have changed; the renderer then uses that information to actually update the rendered app.
Fiber reimplements the reconciler. It is not principally concerned with rendering.

Reason for Fast DOM Manipulation

When a component's state changes, React re-renders the entire component tree into the virtual DOM, then compares this new virtual DOM to the previous one to identify the minimal differences. Only the parts of the DOM that have changed are then updated in the real DOM.

• Performance optimization: By avoiding direct manipulation of the real DOM, which is relatively slow, the virtual DOM allows for efficient updates, especially in large applications with many dynamic elements.

• Declarative programming: React's virtual DOM enables a declarative approach to UI development, where you describe the desired state of the UI, and React handles the necessary DOM manipulations to achieve it.

Example:

Imagine a counter component where you click a button to increment the count.

• Without virtual DOM:

  Every time you click the button, the entire counter element would be re-rendered in the DOM, even though only the count value needs to change.

• With virtual DOM:

  React would create a new virtual DOM with the updated count, then compare it to the old one, and only update the count text in the real DOM.