Scribd
Upload
19 views

React

React is a popular front-end JavaScript library for building user interfaces based on components. It uses a virtual DOM for declarative programming and efficient updates. Key features include components, hooks, routing, and both class-based and function components. React renders user interfaces by first creating a virtual DOM representation, comparing it with the previous render, determining the necessary changes, and then updating the real DOM with only the changes.

Uploaded by

hedina5402
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views

React

React is a popular front-end JavaScript library for building user interfaces based on components. It uses a virtual DOM for declarative programming and efficient updates. Key features include components, hooks, routing, and both class-based and function components. React renders user interfaces by first creating a virtual DOM representation, comparing it with the previous render, determining the necessary changes, and then updating the real DOM with only the changes.

Uploaded by

hedina5402
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

React

Introduction
React is a free open-source front-end JavaScript library for building user interfaces based on
components. It is maintained by Meta and a community of individual developers and
companies.

Notable Features

Declarative programming
Components
Function components
React Hooks
Server Components
Class Components
Routing
Virtual DOM

Declarative Programming
Declarative programming can be thought of as " telling what to do instead of how to do it ".
The opposite of this approach is Imperative programming which can be defined as " telling
what to do as well as how to do it ".

Virtual DOM
Why DOM manipulations are slow ?

DOM or Document Object Model is an interface that represents the web page as a tree
structure where in each node is an object representing a part of the web page. Whenever we
change this structure or perform a DOM manipulation, the DOM gets updated to represent
the changes. Though these DOM updates are fast, things actually tends to become costly
and slow when the DOM is actually re-painted or re-rendered on the browser. Even if the
change is small like removing a node from the DOM the browser still needs to re-render all
the elements in the node list. Thus for large amounts of DOM manipulations the process of
re-rendering the DOM is expensive.

What is Virtual DOM ?

The Virtual DOM is a lightweight JavaScript representation of the DOM. React stores a
replica of the DOM as virtual DOM in the cache. Every time we make changes to the DOM,
instead of updating and rendering the DOM react creates a new virtual DOM and compares
it with the previous virtual DOM and notes down the changes ( This comparison process is
called diffing and is done by a diffing algorithm ). React then updates the real DOM with the
changes and renders the changes without re-rendering the whole DOM. ( This whole
process of updating the DOM is called reconciliation )

Instead of sending an update for every single change in state of a component


react uses batch updates which combines multiple state change into a single
update. That is only a single re-render will eventually happen.

You might also like