SlideShare a Scribd company logo

Virtual Dom|Browser DOM What are these in React Js?

The Document Object Model (DOM) plays a crucial role in interactive web development. But what is DOM in React JS, and why is it so essential? When you’re working with React, the DOM in React is your interactive connection between the JavaScript code and the rendered website content. React utilizes the Virtual DOM to improve the efficiency of this connection.

1 of 12
Download to read offline
Virtual Dom|Browser DOM What
are these in React Js?
What is DOM?
The Document Object Model (DOM) plays a crucial role in interactive web development. But
what is DOM in React JS, and why is it so essential? When you’re working with React, the
DOM in React is your interactive connection between the JavaScript code and the rendered
website content. React utilizes the Virtual DOM to improve the efficiency of this connection.
Fundamentally, the DOM is a platform- and language-neutral interface that allows scripts
and programs to dynamically access and update the content, structure, and style of a
document. It represents the structure of HTML documents, like a tree, where each branch
ends in a node, and each node contains objects. This structure is essential when you’re
working with JavaScript and frameworks like React, where the DOM React connection is key
to functionality.
The concept of the Virtual DOM in React JS comes into play as a lightweight copy of the
actual DOM. This ‘virtual’ version provides several advantages, as React Virtual DOM
enhances the efficiency of rendering changes to the user interface, making React a
standout choice for developers focusing on user experience.
What is DOM in React?
Document Object Model (DOM) is Javascript Client-Side API to represent and manipulate
Document (HTML/XML).
How does Javascript generate a Document Object model out of it? Every tag is a node. so
HTML, head, body, title, a, pare nodes, Except link and script tags are not considered as a
node. HTML will be the parent node and everything else will be children of the HTML.
So, the tree is generated as,
This is not how the Data Structure is stored in Javascript. Html is not a root node. JavaScript
has its prototype chain so Html is one node that is inherited from Object. Prototype so that
it gets the methods to calculate styles, properties, Manipulating the individual nodes.
Please go through the below picture you will get a better idea.
Now, If you can see the highlighted part is from where our HTML node starts forming a
tree. And we consider it as a DOM object. If you can see CSS style declaration is a sibling of
node/Html and that is why it is not present in the subtree of HTML as a parent.
As we know HTML/node is inherited from Object. Prototype and Dom will get many
methods to retrieve and manipulate the document object model. This is the reason we say
JavaScript is an untyped language that is used to make HTML dynamic.
What makes DOM manipulation slow?
Understanding what makes DOM manipulation slow is vital in identifying why solutions like
the Virtual DOM React uses are beneficial. Traditional DOM manipulation is known to be
resource-intensive. The problem stems from the fact that every small modification in the
DOM can cause the browser to recalculate CSS styles, layout, and render the page. These
recalculations can result in a significant performance hit, especially when complex
interactions or large data manipulations are taking place.
However, this is where the concept of the Virtual DOM in React steps in. React’s Virtual
DOM allows for a more efficient update process. Instead of making direct changes to the
browser DOM, changes are initially made to the Virtual DOM in React. React then uses
efficient diffing algorithms to determine the minimum number of changes necessary to
update the actual DOM. By batching multiple changes together, React avoids the costly
overhead of multiple direct manipulations of the Browser DOM.
This approach, adopted by the Virtual DOM React JS uses, helps optimize performance and
leads to smoother, faster updates in the user interface. So when it comes to understanding
what is DOM in React JS, it’s equally important to appreciate the ingenious solution that the
React Virtual DOM provides to slow DOM manipulation.
These two aspects together – the role of the DOM and the benefit of the Virtual DOM – are
what makes React JS such a powerful tool for web development.
If Document Object Model is so cool, then why go with Virtual DOM?
Although you have all the methods to change the DOM tree it comes with a lot of costs. If
you want to change some child nodes. Javascript has to repaint the window with margin,
padding, color, etc. properties. Document object model knows how to re-render the page
but it is not so intelligent to keep track of each node and change only the node which is
changing.
Let’s take an example,
You have asked to decorate the room with 100 balloons. You have decorated the room with
100 balloons.
Now your mentor told you the color of each balloon should be red. so you remove all the
balloons and now decorate the room with red balloons.
The mentor comes and asks you now change balloon no 90 with a blue-colored balloon.
now you remove all balloons and bring 99 red balloons and 1 blue balloon and paint
accordingly.
The mentor comes and asks please change balloon no 80 to green. You remove all the
balloons. Go market bring 98 red, 1 blue, 1 green. And decorate the room accordingly.
WOW, will you work this way? No. right? but your Document Object Model does. So,
how to make DOM intelligent?
Now, VIRTUAL DOM comes to rescue us.
What is the Virtual DOM in React JS?
It is a React’s Object that represents the Browsers DOM, Which is intelligent to make
changes in the DOM with the help of the Diff Algorithm. Few Blog says, it is so fast that it
can produce 20000 nodes per second.
For every DOM object, there is a React Virtual DOM object. In simpler terms, virtual DOM in
React JS is like a lightweight copy of a DOM object.
Are you wondering how is virtual dom in react js different from real DOM? React Virtual
DOM has properties the same as real DOM object. However, it lacks the power to change
the screen immediately.
Further, DOM manipulation is slower. Virtual DOM in React JS supports faster manipulation.
This is because it doesn’t let anything be drawn on the screen. In layman’s terms, instead of
moving actual rooms in a house, you edit the blueprint.
Pros and Cons of Virtual DOM
In the web development world, the concept of the Virtual DOM in React JS has sparked a
significant conversation about efficiency and performance. Before diving into the pros and
cons, let’s first address the question – what is Virtual DOM in React JS?
Virtual DOM in React JS is a lightweight copy or ‘virtual’ representation of the actual DOM.
This concept introduces a high-performance algorithm for syncing updates between the
Virtual DOM and the Real DOM, making React Virtual DOM vs Real DOM a fascinating
comparison.
Understanding the Virtual DOM begins with asking, “Where is Virtual DOM stored in React?”
React creates this Virtual DOM in its memory. Every time a component’s state changes, a
new Virtual DOM tree is created. This new tree is then compared with the previous tree, a
process known as diffing. React then smartly updates the Real DOM, applying only the
differences identified during the diffing process.
Now let’s delve into the advantages and drawbacks of this approach.
How is the Virtual DOM Different from the Real DOM?
When we talk about React, the conversation inevitably turns to the Virtual DOM in ReactJS
and how it differentiates from the Real DOM. If you’re wondering what is Real DOM in React
JS, let’s begin with a brief introduction.
The Real DOM (Document Object Model) in ReactJS is the standard model for interacting
with the structure of your web page. It is a tree-like representation of your HTML content
that JavaScript can interact with, making dynamic changes to the visible layout and content.
But the interaction with the Real DOM can be slow and inefficient, especially when there
are frequent changes. That’s where the Virtual DOM in ReactJS comes into play.
React introduces a Virtual DOM to optimize interactions and updates to the webpage.
Instead of making direct changes to the Real DOM (which can be computationally
expensive), React first makes changes to the Virtual DOM. But how many Virtual DOM in
React exist? In reality, there are two Virtual DOM trees involved in this process at any given

Recommended

Maximize Development Efficiency with ReactJS.pdf
Maximize Development Efficiency with ReactJS.pdfMaximize Development Efficiency with ReactJS.pdf
Maximize Development Efficiency with ReactJS.pdfBOSC Tech Labs
 
React js - The Core Concepts
React js - The Core ConceptsReact js - The Core Concepts
React js - The Core ConceptsDivyang Bhambhani
 
Welcome to React & Flux !
Welcome to React & Flux !Welcome to React & Flux !
Welcome to React & Flux !Ritesh Kumar
 
ReactJS - Re-rendering pages in the age of the mutable DOM
ReactJS - Re-rendering pages in the age of the mutable DOMReactJS - Re-rendering pages in the age of the mutable DOM
ReactJS - Re-rendering pages in the age of the mutable DOMMarc Cyr
 
React Js Simplified
React Js SimplifiedReact Js Simplified
React Js SimplifiedSunil Yadav
 
What Is Virtual DOM In React JS.pptx
What Is Virtual DOM In React JS.pptxWhat Is Virtual DOM In React JS.pptx
What Is Virtual DOM In React JS.pptxAkrati Rawat
 

More Related Content

Similar to Virtual Dom|Browser DOM What are these in React Js?

React js Rahil Memon
React js Rahil MemonReact js Rahil Memon
React js Rahil MemonRahilMemon5
 
React js vs react native a comparative analysis
React js vs react native a comparative analysisReact js vs react native a comparative analysis
React js vs react native a comparative analysisShelly Megan
 
React js vs angularjs which framework to choose in 2022_
React js vs angularjs  which framework to choose in 2022_React js vs angularjs  which framework to choose in 2022_
React js vs angularjs which framework to choose in 2022_Moon Technolabs Pvt. Ltd.
 
Better web apps with React and Redux
Better web apps with React and ReduxBetter web apps with React and Redux
Better web apps with React and ReduxAli Sa'o
 
React vs. angular a comprehensive guideline for choosing right front-end fr...
React vs. angular   a comprehensive guideline for choosing right front-end fr...React vs. angular   a comprehensive guideline for choosing right front-end fr...
React vs. angular a comprehensive guideline for choosing right front-end fr...Katy Slemon
 
Frontend Development Bootcamp - React [Online & Offline] In Bangla
Frontend Development Bootcamp - React [Online & Offline] In BanglaFrontend Development Bootcamp - React [Online & Offline] In Bangla
Frontend Development Bootcamp - React [Online & Offline] In BanglaStack Learner
 
Review on React JS
Review on React JSReview on React JS
Review on React JSijtsrd
 
React Js vs Node Js_ Which Framework to Choose for Your Next Web Application
React Js vs Node Js_ Which Framework to Choose for Your Next Web ApplicationReact Js vs Node Js_ Which Framework to Choose for Your Next Web Application
React Js vs Node Js_ Which Framework to Choose for Your Next Web Applicationadityakumar2080
 
Reactjs Introduction - Virtual DOM
Reactjs Introduction - Virtual DOMReactjs Introduction - Virtual DOM
Reactjs Introduction - Virtual DOMTamir Azrab
 
Web Development with Delphi and React - ITDevCon 2016
Web Development with Delphi and React - ITDevCon 2016Web Development with Delphi and React - ITDevCon 2016
Web Development with Delphi and React - ITDevCon 2016Marco Breveglieri
 
Introduction to React JS.pptx
Introduction to React JS.pptxIntroduction to React JS.pptx
Introduction to React JS.pptxSHAIKIRFAN715544
 
All the reasons for choosing react js that you didn't know about - Avi Marcus...
All the reasons for choosing react js that you didn't know about - Avi Marcus...All the reasons for choosing react js that you didn't know about - Avi Marcus...
All the reasons for choosing react js that you didn't know about - Avi Marcus...Codemotion Tel Aviv
 
Reactjs A javascript Library
Reactjs A javascript LibraryReactjs A javascript Library
Reactjs A javascript LibraryMohit Jain
 
Angular 2 vs React. What to chose in 2017?
Angular 2 vs React. What to chose in 2017?Angular 2 vs React. What to chose in 2017?
Angular 2 vs React. What to chose in 2017?TechMagic
 
Intro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate JavascriptIntro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate JavascriptAndrew Lovett-Barron
 
Breaking the Server-Client Divide with Node.js and React
Breaking the Server-Client Divide with Node.js and ReactBreaking the Server-Client Divide with Node.js and React
Breaking the Server-Client Divide with Node.js and ReactDejan Glozic
 

Similar to Virtual Dom|Browser DOM What are these in React Js? (20)

React js Rahil Memon
React js Rahil MemonReact js Rahil Memon
React js Rahil Memon
 
Nodejs vs react js converted
Nodejs vs react js convertedNodejs vs react js converted
Nodejs vs react js converted
 
Tech Talk on ReactJS
Tech Talk on ReactJSTech Talk on ReactJS
Tech Talk on ReactJS
 
React js vs react native a comparative analysis
React js vs react native a comparative analysisReact js vs react native a comparative analysis
React js vs react native a comparative analysis
 
React js vs angularjs which framework to choose in 2022_
React js vs angularjs  which framework to choose in 2022_React js vs angularjs  which framework to choose in 2022_
React js vs angularjs which framework to choose in 2022_
 
Better web apps with React and Redux
Better web apps with React and ReduxBetter web apps with React and Redux
Better web apps with React and Redux
 
React vs. angular a comprehensive guideline for choosing right front-end fr...
React vs. angular   a comprehensive guideline for choosing right front-end fr...React vs. angular   a comprehensive guideline for choosing right front-end fr...
React vs. angular a comprehensive guideline for choosing right front-end fr...
 
Frontend Development Bootcamp - React [Online & Offline] In Bangla
Frontend Development Bootcamp - React [Online & Offline] In BanglaFrontend Development Bootcamp - React [Online & Offline] In Bangla
Frontend Development Bootcamp - React [Online & Offline] In Bangla
 
Review on React JS
Review on React JSReview on React JS
Review on React JS
 
JOSA TechTalks - Better Web Apps with React and Redux
JOSA TechTalks - Better Web Apps with React and ReduxJOSA TechTalks - Better Web Apps with React and Redux
JOSA TechTalks - Better Web Apps with React and Redux
 
Angular vs.pdf
Angular vs.pdfAngular vs.pdf
Angular vs.pdf
 
React Js vs Node Js_ Which Framework to Choose for Your Next Web Application
React Js vs Node Js_ Which Framework to Choose for Your Next Web ApplicationReact Js vs Node Js_ Which Framework to Choose for Your Next Web Application
React Js vs Node Js_ Which Framework to Choose for Your Next Web Application
 
Reactjs Introduction - Virtual DOM
Reactjs Introduction - Virtual DOMReactjs Introduction - Virtual DOM
Reactjs Introduction - Virtual DOM
 
Web Development with Delphi and React - ITDevCon 2016
Web Development with Delphi and React - ITDevCon 2016Web Development with Delphi and React - ITDevCon 2016
Web Development with Delphi and React - ITDevCon 2016
 
Introduction to React JS.pptx
Introduction to React JS.pptxIntroduction to React JS.pptx
Introduction to React JS.pptx
 
All the reasons for choosing react js that you didn't know about - Avi Marcus...
All the reasons for choosing react js that you didn't know about - Avi Marcus...All the reasons for choosing react js that you didn't know about - Avi Marcus...
All the reasons for choosing react js that you didn't know about - Avi Marcus...
 
Reactjs A javascript Library
Reactjs A javascript LibraryReactjs A javascript Library
Reactjs A javascript Library
 
Angular 2 vs React. What to chose in 2017?
Angular 2 vs React. What to chose in 2017?Angular 2 vs React. What to chose in 2017?
Angular 2 vs React. What to chose in 2017?
 
Intro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate JavascriptIntro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate Javascript
 
Breaking the Server-Client Divide with Node.js and React
Breaking the Server-Client Divide with Node.js and ReactBreaking the Server-Client Divide with Node.js and React
Breaking the Server-Client Divide with Node.js and React
 

More from RajasreePothula3

How to find the Best React Development Company for your App?
How to find the Best React Development Company for your App? How to find the Best React Development Company for your App?
How to find the Best React Development Company for your App? RajasreePothula3
 
Code Splitting in React js
Code Splitting in React js Code Splitting in React js
Code Splitting in React js RajasreePothula3
 
Outsourcing ReactJS Development: Key Considerations and Strategies
Outsourcing ReactJS Development: Key Considerations and Strategies Outsourcing ReactJS Development: Key Considerations and Strategies
Outsourcing ReactJS Development: Key Considerations and Strategies RajasreePothula3
 
Guide to Outsourcing ReactJS Development Successfully
Guide to Outsourcing ReactJS Development Successfully Guide to Outsourcing ReactJS Development Successfully
Guide to Outsourcing ReactJS Development Successfully RajasreePothula3
 
What are package managers?
What are package managers? What are package managers?
What are package managers? RajasreePothula3
 
Basic JavaScript Interview Questions
Basic JavaScript Interview Questions Basic JavaScript Interview Questions
Basic JavaScript Interview Questions RajasreePothula3
 
Learn Stateful and Stateless components in ReactJS
Learn Stateful and Stateless components in ReactJS Learn Stateful and Stateless components in ReactJS
Learn Stateful and Stateless components in ReactJS RajasreePothula3
 

More from RajasreePothula3 (7)

How to find the Best React Development Company for your App?
How to find the Best React Development Company for your App? How to find the Best React Development Company for your App?
How to find the Best React Development Company for your App?
 
Code Splitting in React js
Code Splitting in React js Code Splitting in React js
Code Splitting in React js
 
Outsourcing ReactJS Development: Key Considerations and Strategies
Outsourcing ReactJS Development: Key Considerations and Strategies Outsourcing ReactJS Development: Key Considerations and Strategies
Outsourcing ReactJS Development: Key Considerations and Strategies
 
Guide to Outsourcing ReactJS Development Successfully
Guide to Outsourcing ReactJS Development Successfully Guide to Outsourcing ReactJS Development Successfully
Guide to Outsourcing ReactJS Development Successfully
 
What are package managers?
What are package managers? What are package managers?
What are package managers?
 
Basic JavaScript Interview Questions
Basic JavaScript Interview Questions Basic JavaScript Interview Questions
Basic JavaScript Interview Questions
 
Learn Stateful and Stateless components in ReactJS
Learn Stateful and Stateless components in ReactJS Learn Stateful and Stateless components in ReactJS
Learn Stateful and Stateless components in ReactJS
 

Recently uploaded

Actionable Fundraising Planning - Slide Presentation.pptx.pdf
Actionable Fundraising Planning - Slide Presentation.pptx.pdfActionable Fundraising Planning - Slide Presentation.pptx.pdf
Actionable Fundraising Planning - Slide Presentation.pptx.pdfBloomerang
 
SD-WAN_MoD.pptx for SD WAN networks connectivity
SD-WAN_MoD.pptx for SD WAN networks connectivitySD-WAN_MoD.pptx for SD WAN networks connectivity
SD-WAN_MoD.pptx for SD WAN networks connectivitybayusch
 
HPM Panther (Captan 50% WP) Presentation
HPM Panther (Captan 50% WP) PresentationHPM Panther (Captan 50% WP) Presentation
HPM Panther (Captan 50% WP) PresentationHpm India
 
SlideEgg_300445-Apple Inc(1).pptx case study
SlideEgg_300445-Apple Inc(1).pptx case studySlideEgg_300445-Apple Inc(1).pptx case study
SlideEgg_300445-Apple Inc(1).pptx case studyindobanglatradeinter
 
Miller Coors Presentation at CAGNY Feb 2024
Miller Coors Presentation at CAGNY Feb 2024Miller Coors Presentation at CAGNY Feb 2024
Miller Coors Presentation at CAGNY Feb 2024Neil Kimberley
 
publicpolicy-130621235359-phpapp02 2.pdf
publicpolicy-130621235359-phpapp02 2.pdfpublicpolicy-130621235359-phpapp02 2.pdf
publicpolicy-130621235359-phpapp02 2.pdfmmople
 
Decoding Generative AI-AI Playbook for Marketing Students_UPower DUGA_Supavad...
Decoding Generative AI-AI Playbook for Marketing Students_UPower DUGA_Supavad...Decoding Generative AI-AI Playbook for Marketing Students_UPower DUGA_Supavad...
Decoding Generative AI-AI Playbook for Marketing Students_UPower DUGA_Supavad...Supavadee(Noi) Tantiyanon
 
edition features a handful of the Brands Of Honour- 2024.pdf
edition features a handful of the Brands Of Honour- 2024.pdfedition features a handful of the Brands Of Honour- 2024.pdf
edition features a handful of the Brands Of Honour- 2024.pdfinsightssuccess2
 
Pernod Ricard presentation at CAGNY 2024
Pernod Ricard presentation at CAGNY 2024Pernod Ricard presentation at CAGNY 2024
Pernod Ricard presentation at CAGNY 2024Neil Kimberley
 
02.20 Webinar - Online Giving Trends.pdf
02.20 Webinar - Online Giving Trends.pdf02.20 Webinar - Online Giving Trends.pdf
02.20 Webinar - Online Giving Trends.pdfBloomerang
 
Hershey Presentation at 2024 CAGY Conference
Hershey Presentation at 2024 CAGY ConferenceHershey Presentation at 2024 CAGY Conference
Hershey Presentation at 2024 CAGY ConferenceNeil Kimberley
 
The Coca-Cola Company Presentation at CAGNY 2024.pdf
The Coca-Cola Company Presentation at  CAGNY 2024.pdfThe Coca-Cola Company Presentation at  CAGNY 2024.pdf
The Coca-Cola Company Presentation at CAGNY 2024.pdfNeil Kimberley
 
02.22.2024 Email Options in Bloomerang.pdf
02.22.2024 Email Options in Bloomerang.pdf02.22.2024 Email Options in Bloomerang.pdf
02.22.2024 Email Options in Bloomerang.pdfBloomerang
 
Eni: fourth quarter and full year 2023 results
Eni: fourth quarter and full year 2023 resultsEni: fourth quarter and full year 2023 results
Eni: fourth quarter and full year 2023 resultsEni
 
Grevault battery storage system manufacturer
Grevault battery storage system manufacturerGrevault battery storage system manufacturer
Grevault battery storage system manufacturerGrevault
 
General Mills Presentation at CAGNY 2024
General Mills Presentation at CAGNY 2024General Mills Presentation at CAGNY 2024
General Mills Presentation at CAGNY 2024Neil Kimberley
 
SARomics Biostructures 2024 Company Presentation
SARomics Biostructures 2024 Company PresentationSARomics Biostructures 2024 Company Presentation
SARomics Biostructures 2024 Company PresentationSalam Al-Karadaghi
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 

Recently uploaded (20)

Actionable Fundraising Planning - Slide Presentation.pptx.pdf
Actionable Fundraising Planning - Slide Presentation.pptx.pdfActionable Fundraising Planning - Slide Presentation.pptx.pdf
Actionable Fundraising Planning - Slide Presentation.pptx.pdf
 
SD-WAN_MoD.pptx for SD WAN networks connectivity
SD-WAN_MoD.pptx for SD WAN networks connectivitySD-WAN_MoD.pptx for SD WAN networks connectivity
SD-WAN_MoD.pptx for SD WAN networks connectivity
 
Carol Scott - How to Thrive in the AI Era.pdf
Carol Scott - How to Thrive in the AI Era.pdfCarol Scott - How to Thrive in the AI Era.pdf
Carol Scott - How to Thrive in the AI Era.pdf
 
HPM Panther (Captan 50% WP) Presentation
HPM Panther (Captan 50% WP) PresentationHPM Panther (Captan 50% WP) Presentation
HPM Panther (Captan 50% WP) Presentation
 
SlideEgg_300445-Apple Inc(1).pptx case study
SlideEgg_300445-Apple Inc(1).pptx case studySlideEgg_300445-Apple Inc(1).pptx case study
SlideEgg_300445-Apple Inc(1).pptx case study
 
Miller Coors Presentation at CAGNY Feb 2024
Miller Coors Presentation at CAGNY Feb 2024Miller Coors Presentation at CAGNY Feb 2024
Miller Coors Presentation at CAGNY Feb 2024
 
publicpolicy-130621235359-phpapp02 2.pdf
publicpolicy-130621235359-phpapp02 2.pdfpublicpolicy-130621235359-phpapp02 2.pdf
publicpolicy-130621235359-phpapp02 2.pdf
 
Decoding Generative AI-AI Playbook for Marketing Students_UPower DUGA_Supavad...
Decoding Generative AI-AI Playbook for Marketing Students_UPower DUGA_Supavad...Decoding Generative AI-AI Playbook for Marketing Students_UPower DUGA_Supavad...
Decoding Generative AI-AI Playbook for Marketing Students_UPower DUGA_Supavad...
 
edition features a handful of the Brands Of Honour- 2024.pdf
edition features a handful of the Brands Of Honour- 2024.pdfedition features a handful of the Brands Of Honour- 2024.pdf
edition features a handful of the Brands Of Honour- 2024.pdf
 
Pernod Ricard presentation at CAGNY 2024
Pernod Ricard presentation at CAGNY 2024Pernod Ricard presentation at CAGNY 2024
Pernod Ricard presentation at CAGNY 2024
 
02.20 Webinar - Online Giving Trends.pdf
02.20 Webinar - Online Giving Trends.pdf02.20 Webinar - Online Giving Trends.pdf
02.20 Webinar - Online Giving Trends.pdf
 
Hershey Presentation at 2024 CAGY Conference
Hershey Presentation at 2024 CAGY ConferenceHershey Presentation at 2024 CAGY Conference
Hershey Presentation at 2024 CAGY Conference
 
The Coca-Cola Company Presentation at CAGNY 2024.pdf
The Coca-Cola Company Presentation at  CAGNY 2024.pdfThe Coca-Cola Company Presentation at  CAGNY 2024.pdf
The Coca-Cola Company Presentation at CAGNY 2024.pdf
 
02.22.2024 Email Options in Bloomerang.pdf
02.22.2024 Email Options in Bloomerang.pdf02.22.2024 Email Options in Bloomerang.pdf
02.22.2024 Email Options in Bloomerang.pdf
 
Eni: fourth quarter and full year 2023 results
Eni: fourth quarter and full year 2023 resultsEni: fourth quarter and full year 2023 results
Eni: fourth quarter and full year 2023 results
 
Grevault battery storage system manufacturer
Grevault battery storage system manufacturerGrevault battery storage system manufacturer
Grevault battery storage system manufacturer
 
General Mills Presentation at CAGNY 2024
General Mills Presentation at CAGNY 2024General Mills Presentation at CAGNY 2024
General Mills Presentation at CAGNY 2024
 
SARomics Biostructures 2024 Company Presentation
SARomics Biostructures 2024 Company PresentationSARomics Biostructures 2024 Company Presentation
SARomics Biostructures 2024 Company Presentation
 
Pan Dhoni - Modernizing Data And Analytics using AI.pdf
Pan Dhoni - Modernizing Data And Analytics using AI.pdfPan Dhoni - Modernizing Data And Analytics using AI.pdf
Pan Dhoni - Modernizing Data And Analytics using AI.pdf
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 

Virtual Dom|Browser DOM What are these in React Js?

  • 1. Virtual Dom|Browser DOM What are these in React Js? What is DOM? The Document Object Model (DOM) plays a crucial role in interactive web development. But what is DOM in React JS, and why is it so essential? When you’re working with React, the DOM in React is your interactive connection between the JavaScript code and the rendered website content. React utilizes the Virtual DOM to improve the efficiency of this connection. Fundamentally, the DOM is a platform- and language-neutral interface that allows scripts and programs to dynamically access and update the content, structure, and style of a document. It represents the structure of HTML documents, like a tree, where each branch ends in a node, and each node contains objects. This structure is essential when you’re working with JavaScript and frameworks like React, where the DOM React connection is key to functionality. The concept of the Virtual DOM in React JS comes into play as a lightweight copy of the actual DOM. This ‘virtual’ version provides several advantages, as React Virtual DOM enhances the efficiency of rendering changes to the user interface, making React a standout choice for developers focusing on user experience. What is DOM in React?
  • 2. Document Object Model (DOM) is Javascript Client-Side API to represent and manipulate Document (HTML/XML). How does Javascript generate a Document Object model out of it? Every tag is a node. so HTML, head, body, title, a, pare nodes, Except link and script tags are not considered as a node. HTML will be the parent node and everything else will be children of the HTML. So, the tree is generated as, This is not how the Data Structure is stored in Javascript. Html is not a root node. JavaScript has its prototype chain so Html is one node that is inherited from Object. Prototype so that it gets the methods to calculate styles, properties, Manipulating the individual nodes. Please go through the below picture you will get a better idea. Now, If you can see the highlighted part is from where our HTML node starts forming a tree. And we consider it as a DOM object. If you can see CSS style declaration is a sibling of node/Html and that is why it is not present in the subtree of HTML as a parent. As we know HTML/node is inherited from Object. Prototype and Dom will get many methods to retrieve and manipulate the document object model. This is the reason we say JavaScript is an untyped language that is used to make HTML dynamic. What makes DOM manipulation slow?
  • 3. Understanding what makes DOM manipulation slow is vital in identifying why solutions like the Virtual DOM React uses are beneficial. Traditional DOM manipulation is known to be resource-intensive. The problem stems from the fact that every small modification in the DOM can cause the browser to recalculate CSS styles, layout, and render the page. These recalculations can result in a significant performance hit, especially when complex interactions or large data manipulations are taking place. However, this is where the concept of the Virtual DOM in React steps in. React’s Virtual DOM allows for a more efficient update process. Instead of making direct changes to the browser DOM, changes are initially made to the Virtual DOM in React. React then uses efficient diffing algorithms to determine the minimum number of changes necessary to update the actual DOM. By batching multiple changes together, React avoids the costly overhead of multiple direct manipulations of the Browser DOM. This approach, adopted by the Virtual DOM React JS uses, helps optimize performance and leads to smoother, faster updates in the user interface. So when it comes to understanding what is DOM in React JS, it’s equally important to appreciate the ingenious solution that the React Virtual DOM provides to slow DOM manipulation. These two aspects together – the role of the DOM and the benefit of the Virtual DOM – are what makes React JS such a powerful tool for web development. If Document Object Model is so cool, then why go with Virtual DOM?
  • 4. Although you have all the methods to change the DOM tree it comes with a lot of costs. If you want to change some child nodes. Javascript has to repaint the window with margin, padding, color, etc. properties. Document object model knows how to re-render the page but it is not so intelligent to keep track of each node and change only the node which is changing. Let’s take an example, You have asked to decorate the room with 100 balloons. You have decorated the room with 100 balloons. Now your mentor told you the color of each balloon should be red. so you remove all the balloons and now decorate the room with red balloons. The mentor comes and asks you now change balloon no 90 with a blue-colored balloon. now you remove all balloons and bring 99 red balloons and 1 blue balloon and paint accordingly. The mentor comes and asks please change balloon no 80 to green. You remove all the balloons. Go market bring 98 red, 1 blue, 1 green. And decorate the room accordingly. WOW, will you work this way? No. right? but your Document Object Model does. So, how to make DOM intelligent? Now, VIRTUAL DOM comes to rescue us.
  • 5. What is the Virtual DOM in React JS? It is a React’s Object that represents the Browsers DOM, Which is intelligent to make changes in the DOM with the help of the Diff Algorithm. Few Blog says, it is so fast that it can produce 20000 nodes per second. For every DOM object, there is a React Virtual DOM object. In simpler terms, virtual DOM in React JS is like a lightweight copy of a DOM object. Are you wondering how is virtual dom in react js different from real DOM? React Virtual DOM has properties the same as real DOM object. However, it lacks the power to change the screen immediately. Further, DOM manipulation is slower. Virtual DOM in React JS supports faster manipulation. This is because it doesn’t let anything be drawn on the screen. In layman’s terms, instead of moving actual rooms in a house, you edit the blueprint. Pros and Cons of Virtual DOM In the web development world, the concept of the Virtual DOM in React JS has sparked a significant conversation about efficiency and performance. Before diving into the pros and cons, let’s first address the question – what is Virtual DOM in React JS? Virtual DOM in React JS is a lightweight copy or ‘virtual’ representation of the actual DOM. This concept introduces a high-performance algorithm for syncing updates between the
  • 6. Virtual DOM and the Real DOM, making React Virtual DOM vs Real DOM a fascinating comparison. Understanding the Virtual DOM begins with asking, “Where is Virtual DOM stored in React?” React creates this Virtual DOM in its memory. Every time a component’s state changes, a new Virtual DOM tree is created. This new tree is then compared with the previous tree, a process known as diffing. React then smartly updates the Real DOM, applying only the differences identified during the diffing process. Now let’s delve into the advantages and drawbacks of this approach. How is the Virtual DOM Different from the Real DOM? When we talk about React, the conversation inevitably turns to the Virtual DOM in ReactJS and how it differentiates from the Real DOM. If you’re wondering what is Real DOM in React JS, let’s begin with a brief introduction. The Real DOM (Document Object Model) in ReactJS is the standard model for interacting with the structure of your web page. It is a tree-like representation of your HTML content that JavaScript can interact with, making dynamic changes to the visible layout and content. But the interaction with the Real DOM can be slow and inefficient, especially when there are frequent changes. That’s where the Virtual DOM in ReactJS comes into play. React introduces a Virtual DOM to optimize interactions and updates to the webpage. Instead of making direct changes to the Real DOM (which can be computationally expensive), React first makes changes to the Virtual DOM. But how many Virtual DOM in React exist? In reality, there are two Virtual DOM trees involved in this process at any given
  • 7. point: the current Virtual DOM and the updated Virtual DOM reflecting the new state after changes. Difference between Virtual DOM in ReactJS and the Real DOM ● Efficiency: The most crucial difference lies in the efficiency of updates. Direct changes to the Real DOM can be slow, particularly if they trigger page re-renders. React instead applies changes to the Virtual DOM and then uses a diffing algorithm to apply only necessary updates to the Real DOM, increasing performance. ● Batch Updates: Another key difference is how updates are handled. The Real DOM updates immediately whenever a change is made, which can be costly in terms of performance. On the other hand, React batches multiple changes together on the Virtual DOM before applying them to the Real DOM, resulting in fewer actual DOM manipulations. ● Memory Efficiency: The Real DOM resides in the browser’s memory and gets directly affected by changes, whereas the Virtual DOM is a lighter-weight copy that resides in the application’s memory, making changes less resource-intensive. To fully understand what is the DOM in React, it’s essential to comprehend both these aspects – the Real and the Virtual DOM. The addition of the Virtual DOM to ReactJS is a revolutionary approach to improving web app performance. How is the Virtual DOM Different from the Shadow DOM? Understanding the difference between the Virtual DOM and the Shadow DOM is an essential aspect of mastering modern web development. Each serves a unique purpose
  • 8. and provides different benefits. But before we delve into their differences, let’s review how the Virtual DOM works in React JS and React Native and how it compares to the Real DOM in React JS. In React JS, the Virtual DOM is a lightweight representation of the Real DOM. This virtual representation improves performance by reducing the amount of direct manipulation on the resource-intensive Real DOM. Instead of directly modifying the Real DOM (which can trigger costly page re-renders), the Virtual DOM batches multiple changes together and applies them all at once. This difference between the Virtual DOM and Real DOM in React JS is a key factor in why we use Virtual DOM in React. Now, let’s consider the Shadow DOM. The Shadow DOM is a web standard that enables encapsulation in the browser. It allows for the creation of a separate, isolated DOM tree attached to an element of the Real DOM, without affecting other parts of the DOM tree. Difference between the Virtual DOM and the Shadow DOM ● Scope: While the Virtual DOM represents the entire HTML document and is used for diffing and efficiently updating the Real DOM, the Shadow DOM is used to create an isolated DOM tree for a specific element, ensuring styles and scripts are scoped to that tree and do not leak out. ● Implementation: The Virtual DOM is an application-level implementation used primarily in libraries like React JS and React Native, whereas the Shadow DOM is a browser technology built into the web platform.
  • 9. ● Purpose: The Virtual DOM’s main purpose is to provide a performant way to update the view, given the use of Virtual DOM in React JS. On the other hand, the Shadow DOM provides style encapsulation and avoids style conflicts in the larger DOM tree. Understanding how the Virtual DOM works in React Native and React JS, compared to the Shadow DOM, underscores the versatility and diversity of tools available for managing and interacting with the DOM in modern web development. Both serve unique purposes, and their use depends largely on the specific needs and goals of your project. How is the Virtual DOM Different from the Real DOM? When we talk about React, the conversation inevitably turns to the Virtual DOM in ReactJS and how it differentiates from the Real DOM. If you’re wondering what is Real DOM in React JS, let’s begin with a brief introduction. The Real DOM (Document Object Model) in ReactJS is the standard model for interacting with the structure of your web page. It is a tree-like representation of your HTML content that JavaScript can interact with, making dynamic changes to the visible layout and content. But the interaction with the Real DOM can be slow and inefficient, especially when there are frequent changes. That’s where the Virtual DOM in ReactJS comes into play. React introduces a Virtual DOM to optimize interactions and updates to the webpage. Instead of making direct changes to the Real DOM (which can be computationally expensive), React first makes changes to the Virtual DOM. But how many Virtual DOM in React exist? In reality, there are two Virtual DOM trees involved in this process at any given
  • 10. point: the current Virtual DOM and the updated Virtual DOM reflecting the new state after changes. Difference between Virtual DOM in ReactJS and the Real DOM ● Efficiency: The most crucial difference lies in the efficiency of updates. Direct changes to the Real DOM can be slow, particularly if they trigger page re-renders. React instead applies changes to the Virtual DOM and then uses a diffing algorithm to apply only necessary updates to the Real DOM, increasing performance. ● Batch Updates: Another key difference is how updates are handled. The Real DOM updates immediately whenever a change is made, which can be costly in terms of performance. On the other hand, React batches multiple changes together on the Virtual DOM before applying them to the Real DOM, resulting in fewer actual DOM manipulations. ● Memory Efficiency: The Real DOM resides in the browser’s memory and gets directly affected by changes, whereas the Virtual DOM is a lighter-weight copy that resides in the application’s memory, making changes less resource-intensive. To fully understand what is the DOM in React, it’s essential to comprehend both these aspects – the Real and the Virtual DOM. The addition of the Virtual DOM to ReactJS is a revolutionary approach to improving web app performance. How is the Virtual DOM Different from the Shadow DOM? Understanding the difference between the Virtual DOM and the Shadow DOM is an essential aspect of mastering modern web development. Each serves a unique purpose
  • 11. and provides different benefits. But before we delve into their differences, let’s review how the Virtual DOM works in React JS and React Native and how it compares to the Real DOM in React JS. In React JS, the Virtual DOM is a lightweight representation of the Real DOM. This virtual representation improves performance by reducing the amount of direct manipulation on the resource-intensive Real DOM. Instead of directly modifying the Real DOM (which can trigger costly page re-renders), the Virtual DOM batches multiple changes together and applies them all at once. This difference between the Virtual DOM and Real DOM in React JS is a key factor in why we use Virtual DOM in React. Now, let’s consider the Shadow DOM. The Shadow DOM is a web standard that enables encapsulation in the browser. It allows for the creation of a separate, isolated DOM tree attached to an element of the Real DOM, without affecting other parts of the DOM tree. Difference between the Virtual DOM and the Shadow DOM ● Scope: While the Virtual DOM represents the entire HTML document and is used for diffing and efficiently updating the Real DOM, the Shadow DOM is used to create an isolated DOM tree for a specific element, ensuring styles and scripts are scoped to that tree and do not leak out. ● Implementation: The Virtual DOM is an application-level implementation used primarily in libraries like React JS and React Native, whereas the Shadow DOM is a browser technology built into the web platform.
  • 12. ● Purpose: The Virtual DOM’s main purpose is to provide a performant way to update the view, given the use of Virtual DOM in React JS. On the other hand, the Shadow DOM provides style encapsulation and avoids style conflicts in the larger DOM tree. Understanding how the Virtual DOM works in React Native and React JS, compared to the Shadow DOM, underscores the versatility and diversity of tools available for managing and interacting with the DOM in modern web development. Both serve unique purposes, and their use depends largely on the specific needs and goals of your project. Conclusion: In React.js, the Virtual DOM and Browser DOM are two fundamental concepts that play a crucial role in optimizing and enhancing the performance of web applications. The Virtual DOM is an abstract representation of the actual browser DOM and serves as a lightweight copy of it. React leverages the Virtual DOM to efficiently update and render components by performing a diffing algorithm, which calculates the minimal changes needed to update the actual DOM. This approach minimizes unnecessary re-renders and improves the overall efficiency of the application. On the other hand, the Browser DOM represents the actual HTML structure of a web page and is responsible for rendering and manipulating the content displayed to users. React's Virtual DOM acts as a mediator between the components and the Browser DOM, allowing for efficient updates without directly interacting with the real DOM. By employing this mechanism, React enables developers to build highly interactive and responsive user interfaces, leading to better user experiences and smoother performance.