Scribd
Upload
79 views

React Virtual DOM Vs Real DOM

Uploaded by

katarichallenge
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
79 views

React Virtual DOM Vs Real DOM

Uploaded by

katarichallenge
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/ 10

React

Virtual DOM
vs
WTF is a
Virtual DOM?

Real DOM re
sha
and
like
@LINKINSUNIL swipe @OFFICIALSKV
1

What is DOM?
The DOM is an abstraction of a page’s HTML
structure. It takes HTML elements and wraps them
in an object with a tree-structure — maintaining
the parent/child relationships of those nested
HTML elements. This provides an API that allows us
to traverse nodes (HTML elements) and
manipulate them in a number of ways — such as
adding nodes, removing nodes, editing a node’s
content, etc.

Ahh !!
Like a Family
Tree?

Real DOM

@linkinsunil swipe @officialskv


2

DOM: An HTML Structure

document

<html>

<head> <body>

<title> <meta>

<h1> <p> <div>

@linkinsunil swipe @officialskv


3

The Problem with DOM

Lets say we want to update here from Orange to


Lemon. Then we need to create a new array.

👉 In an efficient way we can just traverse to the


fruits[1] and update only this element.

👉 Now it’s common to have a thousands node in a


single SPA. So repainting the whole page for each
change is very-very expensive.

👉 Ideally, we’d like to only re-render items that


receive updates, leaving the rest of the items as-
is.

@linkinsunil swipe @officialskv


4

The Methods of update

Dirty Checking (slow)


In AngularJS 1.x, data changes were checked by
recursively traversing every node at fixed
intervals, which was inefficient as it required
examining all nodes even if their data was up-to-
date.

Observable (fast)
Components are responsible for listening to when
an update takes place. Since the data is saved on
the state, components can simply listen to events
on the state and if there is an update, it can re-
render to the UI. React uses it.

@linkinsunil swipe @officialskv


5

Virtual DOM
👉 The Virtual DOM is a light-weight abstraction of
the DOM.

👉 You can think of it as a copy of the DOM, that


can be updated without affecting the actual DOM.

👉 It has all the same properties as the real DOM


object, but doesn’t have the ability to write to the
screen like the real DOM.

👉 The virtual DOM gains it’s speed and efficiency


from the fact that it’s lightweight.

👉 A new virtual DOM is created after every re-


render.

@linkinsunil swipe @officialskv


6

Under the hood


Reconciliation is a process to compare and keep
in sync the two files (Real and Virtual DOM). Diffing
algorithm is a technique of reconciliation which is
used by React.

Is Shadow DOM same as the Virtual DOM?


No, they are different. The Shadow DOM is a
browser technology designed primarily for
scoping variables and CSS in web components.
The virtual DOM is a concept implemented by
libraries in JavaScript on top of browser APIs.

@linkinsunil swipe @officialskv


7

Update Process in React


👉 On the first load, ReactDOM.render() will create
the Virtual DOM tree and real DOM tree.

👉 As React works on Observable patterns, when


any event(like key press, left click, api response,
etc.) occurred, Virtual DOM tree nodes are notified
for props change, If the properties used in that
node are updated, the node is updated else left
as it is.

👉 React compares Virtual DOM with real DOM and


updates real DOM. This process is called
Reconciliation. React uses Diffing algorithm
technique of Reconciliation.

👉 Updated real DOM is repainted on browser.

@linkinsunil swipe @officialskv


8

Additional Info
👉 Virtual DOM is pure JS file and light weight, So
capturing any update in Virtual DOM is much
faster than directly updating on Real DOM.

👉 React takes a few milliseconds before


reconciliation. This allows react to bundle few
processes. This increases efficiency and avoids
unnecessary reprocessing. Because of this delay
we should not rely on state just after setState().

👉 React does shallow comparison of props value.


We need to handle deep comparison separately,
immutable is the most common way to handle it.

Want explanation on
- Reconciliation and Diffing Algorithm?
- Use of keys in lists in React?
Let me know in the comments section

@linkinsunil swipe @officialskv


Frontend Developer

You might also like