React Hooks

#javascript #webdev #beginners #react

React hooks are function that allow you to "hook into" React state And lifecycle from function components. Introduced React 16.8,they Eliminated the need for complex class components for most use cases,Making code more readable and reusable.

Most Frequently Used Hooks

useState
useEffect
useContext
useRef
useMemo
useCallback
useReducer

1. useState

useState is hooks in React used to create and manage state inside functional components.State means data that can change over time.

Common Data Types in used to useState()

String - useState("")
Number - useState(0)
Boolean - useState(false)
Array - useState([])
Object - useState({})

What is real DOM ?

The real DOM(Document Object Model ) is the actual structural representation of a webpage provided by the browser. It organized the HTML into a tree of object, allowing programing language like javaScript to dynamically read,style and alter the page's content,structure,and attributes.
Every changes made the Real DOM directly translates to visual updates on the user's screen.
The Heavy process in Real DOM. Modifying the Real DOM is relatively slow and resource heavy.Because the browser recalculate the CSS style, page layouts,and repaint the screen with every tiny changes updating it frequently can cause performance lag in complex with web application.

The virtual DOM(VDOM) is a lightweight, in memory representation of the Real Document Object Model (DOM) used by React to optimized UI rendering.Instead of directly updating the slow browser DOM for every change,the system update the VDOM,compares it to a previous snapshot(diffing) and only update the necessary changes to the Real DOM.

How it's Works

Render: When data changes, the entire UI is re-rendered in the Virtual DOM representation.
Diffing: The framework compares the new VDOM with a snapshot of the old VDOM taken just before the update.
Update: The framework calculates the minimal set of changes needed and applies only those changes to the real DOM.
Lightweight Representation: It is a JavaScript object tree that represents what the user interface should look like, making it fast to create and manipulate in memory.