About Hookes in React

#javascript #react

React Hooks

React Hooks are special functions in React that let you use state and other React features inside functional components. Before Hooks, state was mainly used in class components. Hooks made functional components more powerful and easier to write.

Why Hooks are Used

Hooks help you:

Store data in components
Handle user actions
Manage lifecycle methods
Reuse logic
Work with APIs
Improve code readability

Common React Hooks
Used to store and update data.

Virtual DOM and Real DOM in React

 **Real DOM**
  The Real DOM is the actual webpage structure shown in the browser.

When HTML loads in the browser, the browser creates a tree structure called the DOM (Document Object Model).

**Example HTML**
   <h1>Hello</h1>

output
Document
└── h1
└── "Hello"

Problem with Real DOM
Updating the Real DOM is:

slow
expensive
Affects performance

Virtual DOM

The Virtual DOM is a lightweight copy of the Real DOM used by React.
React first updates the Virtual DOM, compares changes, then updates only the changed parts in the Real DOM.