Understanding Virtual DOM? Concept behind Virtual DOM? React For Beginners [2]

Understanding Virtual DOM? Concept behind Virtual DOM? React For Beginners Part 2
Learn More From Our Website:-

Attribution

Recent Videos:-

Strict Equality Vs Abstract Equality - Comparison Operator Type - JavaScript Tutorial Part -18

What is Operator? Arithmetic Operator in Detail - JavaScript Tutorial Part - 16

Comparison Operator? Learn with Example - JavaScript Tutorial Part - 17

What is Expression? Take a brief understanding - JavaScript Tutorial Part 15

Learn For/of Loop New In ECMAScript 6 - JavaScript Tutorial Part -14

What is the For...in Loop in JavaScript Tutorial -Part 13

Nested For Loop Important for Dynamic Array - JavaScript Tutorial Part - 12

Must Watch For Loop in JavaScript Tutorial - Part 11

Do/While Loop Complete Syntax with Example - JavaScript Tutorial Part - 10

Understand Looping with While Loop - JavaScript Tutorial Part - 09

Switch Statement Demonstration with Example - JavaScript Tutorial Part - 08

Learn If, If-else, and If-else-if Ladder - JavaScript Tutorial Part - 07

What is String? in Brief JavaScript Tutorial Part - 06

What is Object? JavaScript Object Type? JavaScript Tutorial Part - 05

Type of Data in EcmaScript 6 - JavaScript Tutorial Part - 04

What is Literals, Constants, and Variables - JavaScript Tutorial Part - 03

Getting Started with "Hello world" Program in JavaScript Part 02

What is JavaScript? What is ECMAScript? History of JavaScript? What is ES6? JavaScript - Part [01]

More videos :
How to Create Bootstrap Carousel (Slider) - Complete Guide

Create Website Using HTML & CSS Tutorial - Daily Tuition

How to Create Bootstrap Landing Page Design for Website

Asp net Login Form Design with MySql Database - Part 2

Asp net Login Page Design Using Bootstrap Part-1

How to Make Homepage Design with Bootstrap

Asp net Login Page Using MySql Database C# - Part 2

Asp net Login Page Using CSS Design - Part 1

Login System with Php and Mysql Database

Create Shopping Cart Using PHP and Mysql

User Registration Form with PHP and MySQL with Validation

Online Electronic Store Design Tutorial Part-1

Online Electronic Store Design Tutorial Part-2

Online Electronic Store Design Tutorial Part-3

Online Electronic Store Design Tutorial Part-4

Online Electronic Store Project (E-Commerce Website)

How to Make Corner Folding Effect On Div Tag Tutorial in Hindi

Design Login Page in Html5 CSS - Responsive Page

Login System Using PHP & SQL Database

Design Video Blog Using Bootstrap for Blogger

Create Homepage of Website using Bootstrap Studio ( Tutorial )

Atom Editor Live Preview in Hindi

How to Install Photoshop Color Efex Pro 4 Crack in Hindi

Add Existing Files into .NET

Add Refference In Visual Studio

If you have any question please comment me on my video or you can write it on channel discussion.

Thank You...!

[matanyamin]

Finally a clean and clear explanation for virtual DOM. Thanks!

[manasvinsharma]

The best explanation of Virtual DOM & Real DOM on youtube.

[alexyao]

Nice tutorial, clean and straightforward👍So the virtual DOM will create different copies of the real DOM( the prev and updated one) and figure out what objects have been updated, then update that specific object to real DOM, cause the changes on screen.

[zyt]

im so lucky to meeting this guy on the earth.

[dandandrorivolleyball]

The very last explanation clarified everything for me! Thank you so much

[urbanstreetart]

Great work man now actully I understand how it work .... Its bit easier to understand

[akshaymehta]

I am confused at, why cant the real dom directly be updated partially. Why does it have to go through virtual dom comparison to figure out and tell what to update. Not sure if i am missing something here

[vishalgarg]

basically virtual Dom is blue print of real DOM and as we change any element or component in react app, React will first make the copy of virtual Dom and then update all the elements of that Virtual Dom and after that react will compare the both Virtual DOM which are basically DOM objects and figure out the difference ( the process of update virtual DOM take very less time then real Dom directly) and after the comparison react will update that element or component in real Dom. these hole process is call reconciliation.

[hangtran]

Can you explain more about the speed, if virtual Dom has to do such an amount of steps: change all virtual Dom completely, copy Dom in 2 states, compare 2 state, apply change to real Dom. Is it faster to just update directly to the real Dom?

[elkhanhamet]

Amazing explanation!!! Thank you sir!!!

[akashdhyani]

Hats off to you man!!
What an amazing explanation in just 4 mins. 👏👏

[westfield]

I’m sorry but I’m a little confused. The painting of the ui is slow part right? So if the real dom receives changes at say node 4 from the virtual dom, does it not paint node 1, 2, 3 and 4 again? I guess my confusion is when you make a change in regular JavaScript to only node 4, how is that any different if the real dom is painting node 1, 2, 3 and 4 again. Perhaps I’m not understanding how the painting of the ui is done by the real dom

[marcelogmartins]

Manipulating the real DOM is not slow. Actually it is a lot faster than the Virtual DOM.
The issue is not in the DOM manipulation but in the whole process os rendering that follow it till the pixels been rendered by the browser to the final user.

So the big advantage of using Virtual Dom is not because it is faster, but because we are avoiding touch in real dom and trigger this renderer pipeline but only when it is necessary.

[bappadey]

Mind-Blowing video series, well explanation,
Keep it, dude,
and make to continuing such videos which help the beginners who really need it.

[ajsyt]

Awesome presentation sir.. you use powerpoint or some other software for that?

[lalithyainukurthi]

Thanks for Virtual DOM explanation. I have a question can we see virtual DOM in browser? React will show virutal DOM or the real DOM everytime it loads?

[VarunJain]

how can i create virtual dom in javascript

[rishavbhowmik]

Anyone has any benchmarks of virtual dome increasing performance?
First of all, some 12-year-old kid will make a basic HTMLJs app where he/she reprints the whole HTML element.
And in my lifetime i have never seen any frontend getting any faster or smoother with react.

[bharish]

virtual DOM is the blueprint of the original DOM

[doosedeborah]

The virtual DOM is object identical to the javascript object, it is simply the representation of JavaScript DOM object