ReactJS Tutorial: What is DOM? Real DOM & Virtual DOM. Virtual DOM in React with Example 🔥
Вставка
- Опубліковано 5 жов 2024
- ReactJS is one of the most used library and one of the reason behind this is Virtual DOM. Virtual DOM is a "virtual" representation of real DOM and is local to React.
Every tine the state of application changes, React does those changes in Virtual DOM first and then it sync the Real DOM accordingly.
A Virtual DOM objects has same properties as a real DOM object but it doesn't have the powers to directly reflect the changes on the screen.
Think of Virtual DOM as blueprint of a machine, changes made to the blueprint doesn't reflects on the machine itself.
So when there is a update in the virtual DOM, react compares the virtual DOM with snapshot of virtual DOM taken right before the update of virtual DOM.
With help of this comparison React figures out which components in the UI needs to be updated. This process is called Diffing.
Support my channel by liking and sharing my videos so that I can reach to wider audience. Please share it in your network 🙏
►ReactJS Introduction
• ReactJS Tutorial - Int...
►Click here to Subscribe the channel:
studio.youtube....
►JavaScript Course with ES6 Features-:
ua-cam.com/users/pl....
►Angular Complete Course:
ua-cam.com/users/pl....
►All important shorts videos:
ua-cam.com/users/pl....
Connect with Me On Social Media
Facebook: / angularjs4be. .
LinkedIn: / nisha-sin. .
Instagram : / nishasingla05
Twitter: / nishasingla05
Excellent example. I understood the concept on a higher level before but no one explained it with such clear example. Thank You 🙆🏻♂️
Mam nobody has explained this important concept this much clear, this is the perfect example that is required to explain the concept. Great job, Thank you so much.😀
We need more teachers like you.👍👍👍👍👍
It is the best explanation anybody could have thought of...kudos Nisha
I feel so Lucky for finding your channel!!! Thank you!!!
Stay connected ✌🏻
What an easy and perfect explanation, glad to found your channel
the only video that gives practical example. Thank you
Clearly explained…thanks
I really appreciate you, Ms.Nisha, The last 2 min of the video is excellent, I didn't know before. Thank you.
Great Lecture, Thank You....Mam
Nothing is difficult if some one explain topic like this ,,,,,,,,,
thanks.............
Such great explanation. Looking forward to learn React
Nice Explanation on Reactjs....please post more and more videos... With some small project like filling forms and contact... And send to database using API...thanks alot
Best explanation of Virtual DOM
Love you mam ❤❤❤ your explanation helps me a lot
😀😀
Very important concept.. Thanks Nisha!
Nyc explanation of virtual DOM 😍😍. Waiting for more videos from react
Glad you liked it 😃
wow, thanks so much! You are Awesome Nisha Mam.
Thank you 😊
very great example.... u have a tendency to simplify complex concepts.. thanks
does rendering means refreshing or updating
Awesome examples and explanations!
Well Explained and very informative, Great job
just great example
Thank you so muchhh I got the ans for what I'm looking for...
I have seen so many videos On react ..your one of the best when come across react especially dom explanation...
Do videos on Js/react interview
Good
very good explanation.
wonderful and simple explanation .....
Wow, nice explanation. Understood
Excellent explanation ma'am. Thanks a lot.
Great explanation
Perfect explaination 👌🏻👌🏻👌🏻👏👏👏
Perfect explanation
Very clear explanation mam
Thank you 😊
Such a nice explanation...thank you...
Thank you for watching 😀
Good Job Nisha 🔥🔥
Thank you 😊
you the goat. niice explanationn
Now I am clear with the concept, can you tell more about reconciliation?
just amazing
Awesome 👍
😃😃
Waiting for more videos on react
thank you so much for this video, I was exactly searching for this. but I have a question, isn't it possible to do the same in plain JS what React does? Like without re-rendering the entire component just for updating the clock div?
Subtle explanation. Really nice video..
Thank you for your comment 😀😃🥰
You nailed it. Good Job. Thank you so much.
If I may ask, how much experience do you have with React and JavaScript?
You seem to have really achieved mastery in coding.
No one could ever explain virtual DOM like this with practical implementation and comparison 👏👏 👌, Others were only blabbering theories repeatedly 😡
I started coding from html, css, partials, JavaScript, nodejs and then React. It's been almost 2.5 years, with 6 months of experience working in a company. The remaining 2 years I was working in some management role, I just learned & practiced at home on my own from very beginning.
Now I'm feeling like an ass and idiot for not being smart like you. I believe you must be having atleast 5 years of experience in React. Am I Right??
I'm sorry, I'm feeling jealous.😖
What is shadow dom please explain
Mam,expecting indepth videos on Angular
Actually angular is declining,so everyone focusing on react
Mam only use functional component please
This is called basic concept explanation ......you are not like the other youtubers who covered only the theory
A very bad example and was not expecting this from a channel with such good views. The React example will render the whole tree again and again
->setTimer is called by setInterval, a new React element tree is created.
->ReactDOM.createRoot is called every time, re-initializing the entire React root.
->This results in the entire component being re-rendered from scratch every second.
->The input field is reset because a completely new component tree is rendered each time.
To fix this you need to make it a controlled component and have a timer inside the component.
wrong information
What is wrong
Great explanation