Thank you so much Hitesh sir Here is the takeaway from the video /* 1.The createRoot create's its own DOM and then compare it with the web browser's DOM and only update those components which are actually updated. 2.But the browser removes the whole DOM and then recrates the whole DOM with the updated values this is called reload. 3. However virtual DOM tracks whole DOM like a tree like structure and updates only those values which were only changed. 4. But some values depends on network call so if we update a value it might get update immediately via a network call. 5. So we will have to update it again. To avoid this overhead we can drop the updation calls for the immediate value update. 6. The current algo used by the React is called the React Fibre algo. 7. The algo react uses to differentiate the web browser's tree and React's tree formed through create root is called reconciliation. 8. Reconciliation is the algo behind what popularly known as the Virtual-DOM. 9.In UI it is not necessary for every update to be applied immediately. */
hydration : Jab pehli baar page load hota hai, buttons aur images dikhte hain (HTML aa gaya), lekin kuch click nahi hota kyunki JavaScript ab tak load nahi hui hoti. Phir jab JavaScript load ho ke React ko HTML ke saath connect karti hai aur sab interactive ho jata hai, us process ko hydration bolte hain. aur ye fibre algorithm k through kaafi aachi hoti hai
Aapke teaching pattern se esa lag rha hain hum sab bhi real world problems with solution face kr rhe hai, fresher wali feeling nahi aegi interview Dene jaege to🙏😆 thanks a lot sir
Your teaching style goes beyond the conventional. You don't just educate; you inspire curiosity and create a framework for effective teaching. Grateful for the unique perspective you bring to education!
Time Stamp of the video 0:30 ⇒ intro 0:45-1:17⇒ kahani of Dr. 1:36 ⇒ Virtual DOM 1. kya abhi bhi Virtual DOM padna chhiye? ⇒ yes 2. kya abhi bhi use hota Virtual DOM React me? ⇒ no 3. what is reconciliation? 4. fibre?, virtual dom 3:00 ⇒ Article for understanding Virtual Dom 3:15⇒ `createRoot` method of `react-dom` 5:36 ⇒ documentation “react fibre” search on google - Virtual dom ko update karne ke liye fiber algorithm ka use hota h - 10:10 ⇒ Reconciliation is Virtual DOM - 17:30 ⇒ Fiber - 19:00→ Structure of a fiber will do later 19:45 ⇒ summarizing the video
Your teaching style goes beyond the conventional. You don't just educate; you inspire curiosity and create a framework for effective teaching. Every teacher should adopt your teaching approach. Grateful for the unique perspective you bring to education! Love form Bangladesh💝
Maine already 12 hours ke lecture dekh rakhe hai ....aur thik thak knowledge ho gae project bana ne k lye....par jab se bhaiya apka video dekha hu....React me feel aa rha hai...aur bahut saare baatein aap bata te ho Jo Mai ni janta tha.. Thanks bhaiya.... aur aapki way of talking Masha Allah lajawab hai....😀
maja aagaya. Atleast after watching all the videos till here now i know what is react. Why do we use components. The use of state hook. How react actually works.
Thank you so much Hitesh sir Here is the takeaway from the video /* 1.The createRoot create's its own DOM and then compare it with the web browser's DOM and only update those components which are actually updated. 2.But the browser removes the whole DOM and then recrates the whole DOM with the updated values this is called reload. 3. However virtual DOM tracks whole DOM like a tree like structure and updates only those values which were only changed. 4. But some values depends on network call so if we update a value it might get update immediately via a network call. 5. So we will have to update it again. To avoid this overhead we can drop the updation calls for the immediate value update. 6. The current algo used by the React is called the React Fibre algo. 7. The algo react uses to differentiate the web browser's tree and React's tree formed through create root is called reconciliation. 8. Reconciliation is the algo behind what popularly known as the Virtual-DOM. 9.In UI it is not necessary for every update to be applied immediately. */
React compares its pre-state and post-state virtual DOM while updating the original DOM UI. It basically differentiates between the components and finds the most efficient way to update by minimizing the number of manipulations required. This process is called reconciliation.
The differentiation algorithm compare two trees, one is the main DOM tree of the browser and the second one is the react tree created by the createRoot.
doesn't react itself keeps two trees one as old dom tree and one as current work in progress tree and compares both of em , and then later this changes are rendered on browser in real dom.
i have read it it differentiate current virtual dom with previous virtual dom and then updates them into new virtual dom and then using diffing algorith changes part of original dom
Virtual DOM in react ⚛ Intro 0:00 Start of the session 2:53 createRoot ( ) method mechanism 3:23 React fibre architecture 6:00 What is Fibre 17:29 conclude 20:05 Thank you sir
jaise jaise m hitesh sir aap ki playlist se programming seekh rha hu i feel that i always want a teacher like you who always guide me with also a very minute details of the concepts.. i hope that i will meet you one day
Thanks sir so much 1. re-rendering : it the process of updating virtual DOM or the tree 2. diffing algo: Algo created by react developers to only update the neccesary part of the tree 3.Reconcillation: diffing + re-rendering
I watched another tutorial on react before this but i'm was not getting confidence that I'm a react developer. Now I'm getting confidence in react. Thank you Hitesh .
sir skilled software engineers sirf IIT se nhi Chai aur code se bhi nikalte hai. literally very nice, I followed your JS series, Backend NodeJS series , now I am following your reactJS series. do you I am an experienced developer in backend development with 2 years, but jo mene Yaha sikha wo mere ander confidence laa gaya
Thanks for the amazing content ,,,,, i have brough the course of harkarit singh 0-100 its a great course but i feel like i was not able to understand the react part so i saw your playlist on youtube and trust me i your course is 1000x better than the 99% of courses out there... LOTS OF LOVE FORM MY SIDE.
I 100% agree with Hitesh bhai we are ahead of a lot of developers due to this series. I started working on reactjs just by practicing js playlist chai aur code. I delivered reactjs tasks in my current project. I eagerly come this channel daily to practice reactjs and nodejs playlist.
I don't have words to express how much i'm addicted to the courses provided by u sir😇. So much in depth knowledge which is enough to make a beginner pro in everything.🤩🤩
sir hats of your teaching style . kya samjhate hai app maine bohot sare video dekha hai youtube pe per kahi pe bhi mujhe itna deep concept clearing video nehi mila . miane bass js complete kara tha aur react sikhne ke lia bohot sare channel dekha per samjhme kisi me nehi aya fir mujhe apka channel mila aur just boommmmm ane laga samajh me. maine to apka js wala series bhi dekhna start kar dia hai although mujhe pata hai . per iss ummed mai taki koi aur deep knowledge mil jaye. thank you sir
I recently gave an interview for an internship and i can confirm that these things are indeed important, i was asked reconciliation, jsx, higher order functions etc. in that interview. Thank You So Much sir for this important content 🙏
Video summary [00:00:00] - [00:08:00]: This video is a tutorial on React, a JavaScript library for building user interfaces. The video explains the concepts of virtual DOM, fiber, and reconciliation, and how they affect the performance and rendering of React applications. Highlights: [00:00:00] The purpose and importance of this video Not a hands-on practice, but useful for interviews and understanding Covers the behind-the-scenes of React, such as virtual DOM and fiber Uses an analogy of a doctor and a patient to explain the concept of virtual DOM [00:03:00] What is virtual DOM and how it works A JavaScript representation of the actual DOM Tracks the changes in the UI and updates only the necessary parts Avoids the costly operation of re-rendering the whole DOM [00:05:00] What is fiber and why it is needed A new implementation of React core algorithm The goal is to increase the stability of areas like animation, layout, and gesture The headline feature is incremental rendering, which allows to split rendering work into chunks and spread it over multiple frames [00:07:00] The features and benefits of fiber Ability to pause, abort, and reuse work Ability to assign priority to different types of updates Ability to batch updates more efficiently Ability to avoid dropping frames by working on low-priority updates in idle time
this video was not useful as coding wise but definitely increased my knowledge as i never heard about fibre from any tutorials . thankyou for updating about it.
I've been attempting to learn React for the past couple months. However, I felt in some way that I lack the confidence to understand how to react. That's when I saw your video. I have no idea how I got hooked on this video. I sincerely thank you, Sir.
i generally refrain from putting up comments but your content is so good, i could not help but appreciate your work through this simple comment. thank you so much sir
Kya hi sir , aapne to mereko aisa bna diya h ki jbtk ye neend nhi aati tbtk bs ye playlist chlti rhti maine phle bhi ek bar react pdha pr chodh diya pr is itni aasan lg rhi mja aa rha pdhne me
you are great Hitesh sir !!!! currently i'm in a service based company and i know i will be selected in top level product based company by learning and practicing content like this. Thankyou for providing these type of videos and teaching a self learning way.
Thank you so much Hitesh sir
Here is the takeaway from the video
/*
1.The createRoot create's its own DOM and then compare it with the web browser's DOM and only update those components which are actually updated.
2.But the browser removes the whole DOM and then recrates the whole DOM with the updated values this is called reload.
3. However virtual DOM tracks whole DOM like a tree like structure and updates only those values which were only changed.
4. But some values depends on network call so if we update a value it might get update immediately via a network call.
5. So we will have to update it again. To avoid this overhead we can drop the updation calls for the immediate value update.
6. The current algo used by the React is called the React Fibre algo.
7. The algo react uses to differentiate the web browser's tree and React's tree formed through create root is called reconciliation.
8. Reconciliation is the algo behind what popularly known as the Virtual-DOM.
9.In UI it is not necessary for every update to be applied immediately. */
thank you gaurav bhai
Thanks bhai nice notes
helpful!!!
thanx bhai
thanks a lot bhai
hydration : Jab pehli baar page load hota hai, buttons aur images dikhte hain (HTML aa gaya), lekin kuch click nahi hota kyunki JavaScript ab tak load nahi hui hoti. Phir jab JavaScript load ho ke React ko HTML ke saath connect karti hai aur sab interactive ho jata hai, us process ko hydration bolte hain. aur ye fibre algorithm k through kaafi aachi hoti hai
Nice
Impressive. No one touch these topics in their videos. This series is a true gem.
Congratulations to all Indians for their landing...
From Pakistan ❤️😊
Aapke teaching pattern se esa lag rha hain hum sab bhi real world problems with solution face kr rhe hai, fresher wali feeling nahi aegi interview Dene jaege to🙏😆 thanks a lot sir
Your teaching style goes beyond the conventional. You don't just educate; you inspire curiosity and create a framework for effective teaching. Grateful for the unique perspective you bring to education!
I watch this video 3 times and now understood the document easily. Thank you sir ji
Time Stamp of the video
0:30 ⇒ intro
0:45-1:17⇒ kahani of Dr.
1:36 ⇒ Virtual DOM
1. kya abhi bhi Virtual DOM padna chhiye? ⇒ yes
2. kya abhi bhi use hota Virtual DOM React me? ⇒ no
3. what is reconciliation?
4. fibre?, virtual dom
3:00 ⇒ Article for understanding Virtual Dom
3:15⇒ `createRoot` method of `react-dom`
5:36 ⇒ documentation
“react fibre” search on google
- Virtual dom ko update karne ke liye fiber algorithm ka use hota h
- 10:10 ⇒ Reconciliation is Virtual DOM
- 17:30 ⇒ Fiber
- 19:00→ Structure of a fiber will do later
19:45 ⇒ summarizing the video
Thanks bro
@@RakeshSingh-vl2mz mention not❤
Good work bro
@@karkisanket294thanks for recognising ❤
a sincere thanks for the summary , keep doing
Sir, aap programming bahut achi pdhate h you are my favorite instructor,
This series has become just like drugs it's quite addictive 🙏
so true
true af
Your teaching style goes beyond the conventional. You don't just educate; you inspire curiosity and create a framework for effective teaching. Every teacher should adopt your teaching approach. Grateful for the unique perspective you bring to education!
Love form Bangladesh💝
Maine already 12 hours ke lecture dekh rakhe hai ....aur thik thak knowledge ho gae project bana ne k lye....par jab se bhaiya apka video dekha hu....React me feel aa rha hai...aur bahut saare baatein aap bata te ho Jo Mai ni janta tha.. Thanks bhaiya.... aur aapki way of talking Masha Allah lajawab hai....😀
This React Course is going to be great just like the JavaScript course.
Sir aapke padhane ka tareqa aisa hai k aapka channel aik addiction ban chuka hai. Hats off to you Sir.
maja aagaya. Atleast after watching all the videos till here now i know what is react. Why do we use components. The use of state hook. How react actually works.
Thank you so much Hitesh sir
Here is the takeaway from the video
/*
1.The createRoot create's its own DOM and then compare it with the web browser's DOM and only update those components which are actually updated.
2.But the browser removes the whole DOM and then recrates the whole DOM with the updated values this is called reload.
3. However virtual DOM tracks whole DOM like a tree like structure and updates only those values which were only changed.
4. But some values depends on network call so if we update a value it might get update immediately via a network call.
5. So we will have to update it again. To avoid this overhead we can drop the updation calls for the immediate value update.
6. The current algo used by the React is called the React Fibre algo.
7. The algo react uses to differentiate the web browser's tree and React's tree formed through create root is called reconciliation.
8. Reconciliation is the algo behind what popularly known as the Virtual-DOM.
9.In UI it is not necessary for every update to be applied immediately. */
It's your teaching skill that makes this video so interesting. Really yee to lack rupay ka course hain. Hats off ❤️
Yes sir, You have completed your goal to create a curiosity for exploring new tech things and go into deeper level.
bhaiya you are best and the way you taught of us just amazing sbki jeewan me aap jese tutor honge to jeewan jeena aasan ho jayega
Nimbu Pani hamara bhi tayar he
Bahut achhe se concepts pure ho rahe he confidence bhi in a good way badh raha
Thankyou sir
Initially I felt the Lec would be boring but later through your stories it became more interesting , Expecting the full Course❤❤❤❤
This Guy is the best Instructor I have even seen in my life, Love and Appreciation From Pakistan 💖
If all episodes would've been dropped at once, I would've binge watched this series
Sir aap jis level ki knowledge share kar rahe hai, us level ki knowledge aur kisine kabhi nahi share kiya, Thank you so much Sirji 😊
React compares its pre-state and post-state virtual DOM while updating the original DOM UI. It basically differentiates between the components and finds the most efficient way to update by minimizing the number of manipulations required. This process is called reconciliation.
Sir sach mai app itne ache sai padate ho bohot acha lgta .
Love this react series :)
Everything is of temporary interest on Yt but
Hitesh sir's lectures have become permanent😇😍
Kha tha mai etne din . web ka asli gyan to yha tha . Thanks a lot sir your teaching style makes you a great teacher.......
The differentiation algorithm compare two trees, one is the main DOM tree of the browser and the second one is the react tree created by the createRoot.
doesn't react itself keeps two trees one as old dom tree and one as current work in progress tree and compares both of em , and then later this changes are rendered on browser in real dom.
@@abhinavgupta4866that old dom tree is the reference of browsers dom i think
i have read it it differentiate current virtual dom with previous virtual dom and then updates them into new virtual dom and then using diffing algorith changes part of original dom
Title Correction : Fiber instead of Fibre
Much needed video ! 🙇🏻
Chai with Hitesh-Choudhary Sir is Amazing
Sab youtuber h but aap real Guru h sir thanks
Happy Diwali sir
Was waiting for this really thank you for uploading sir thanks 🙏
Virtual DOM in react ⚛
Intro 0:00
Start of the session 2:53
createRoot ( ) method mechanism 3:23
React fibre architecture 6:00
What is Fibre 17:29
conclude 20:05
Thank you sir
k = hanji kaise h aap sabhi
jaise jaise m hitesh sir aap ki playlist se programming seekh rha hu i feel that i always want a teacher like you who always guide me with also a very minute details of the concepts..
i hope that i will meet you one day
Meja to chai mai hi hai sir, kuch bhi kho. Or wo bhi aap ke code ke saat
App dhanya hain Hitesh ji jo is level ka content YT pe free mein padha rahe hain. KUDOS ❤
thank you itna in-depth padhane k liye. we are blessed ki hum aapke students hai
are sir bohooot bhadiya video tha, mai khud aur dekhunga jaake reconciliation k baare mai, aur fiber ko bhi dekhunga, thank you so much
I really appreciate your efforts for this. I mostly understood the concepts the way you are explaining. Thank you so much sir
Understood the Concept of Virtual DOM, Reconciliation completely and get a little bit idea of Fibre as well....Thanks Sir
Pehli baar kisi theory/core video itne concentration se dekh raha tha. Aisa lag raha hei ye video series bht late mila mujhe.
Thanks sir so much
1. re-rendering : it the process of updating virtual DOM or the tree
2. diffing algo: Algo created by react developers to only update the neccesary part of the tree
3.Reconcillation: diffing + re-rendering
i am very thankful of god for giving opportunity to watched out these type of content on UA-cam
What a great explanation. The complex document felt so simple You are great Sir
Best guru i ever found...no need to go coaching ❤🎉
Loved your way of teaching , how you makes concept crstal clear using a story.😌
😮
Sir ek second bhi bore nahi laga itne dhyan se to me movie nahi dekhta sir just amazing work sir So addictive Series In whole UA-cam🙏.
Completed with 6th lecture. Thankyou Sir for this wonderful lecture. Loving the series.
I watched another tutorial on react before this but i'm was not getting confidence that I'm a react developer. Now I'm getting confidence in react. Thank you Hitesh .
21:10 sir till today, I never see this much level of content on youtube. Salue to you sir 💟
Great knowledge is delivered by Hitesh Sir with so much depth.
sir skilled software engineers sirf IIT se nhi Chai aur code se bhi nikalte hai. literally very nice, I followed your JS series, Backend NodeJS series , now I am following your reactJS series. do you I am an experienced developer in backend development with 2 years, but jo mene Yaha sikha wo mere ander confidence laa gaya
The knowledge gain after watching Hitesh sir's any video is just tremendous and mesmerizing.
Hats off to sir's hard efforts and crazy experience.
Amazing way of teaching with next level of concepts.....................#Best_Series
Sir next level knowledge you are providing us. You are creating excitement regarding code, library, inner workings.
New and Interesting concepts never heard before
Thank you Sir for sharing your lvl of experience with us ❤
Thank you sir. I hate front end a lot. You and Code with harry are two behind my confidence. Which is getting increased day by day in the front end
Thanks for the amazing content ,,,,, i have brough the course of harkarit singh 0-100 its a great course but i feel like i was not able to understand the react part so i saw your playlist on youtube and trust me i your course is 1000x better than the 99% of courses out there... LOTS OF LOVE FORM MY SIDE.
Your teaching makes us love coding rather than just learning it.🙏🙏
I 100% agree with Hitesh bhai we are ahead of a lot of developers due to this series. I started working on reactjs just by practicing js playlist chai aur code. I delivered reactjs tasks in my current project. I eagerly come this channel daily to practice reactjs and nodejs playlist.
I don't have words to express how much i'm addicted to the courses provided by u sir😇. So much in depth knowledge which is enough to make a beginner pro in everything.🤩🤩
sir hats of your teaching style . kya samjhate hai app maine bohot sare video dekha hai youtube pe per kahi pe bhi mujhe itna deep concept clearing video nehi mila . miane bass js complete kara tha aur react sikhne ke lia bohot sare channel dekha per samjhme kisi me nehi aya fir mujhe apka channel mila aur just boommmmm ane laga samajh me. maine to apka js wala series bhi dekhna start kar dia hai although mujhe pata hai . per iss ummed mai taki koi aur deep knowledge mil jaye. thank you sir
Sir aap Top Ho hum sab web students ki hope ho 😊
OP sir, there is only one teacher on UA-cam and that is you sir, rest all are just content creators.
Very helpful channel you clear all the concepts and cover all the topics very easily . Thank You so much for building my confidence .
Htesh Sir, you are amazing I m learning this theory with you @5.30 AM
Once again thank you.
One of the best teachers in the world .
Thanks hitesh bhaiya❤
Story to aap ek dum ache se batate ho...😊
I recently gave an interview for an internship and i can confirm that these things are indeed important, i was asked reconciliation, jsx, higher order functions etc. in that interview. Thank You So Much sir for this important content 🙏
can't belive this kind of content are free on youtube
you are the experienced teacher and your explanation is very clear
Video summary [00:00:00] - [00:08:00]:
This video is a tutorial on React, a JavaScript library for building user interfaces. The video explains the concepts of virtual DOM, fiber, and reconciliation, and how they affect the performance and rendering of React applications.
Highlights:
[00:00:00] The purpose and importance of this video
Not a hands-on practice, but useful for interviews and understanding
Covers the behind-the-scenes of React, such as virtual DOM and fiber
Uses an analogy of a doctor and a patient to explain the concept of virtual DOM
[00:03:00] What is virtual DOM and how it works
A JavaScript representation of the actual DOM
Tracks the changes in the UI and updates only the necessary parts
Avoids the costly operation of re-rendering the whole DOM
[00:05:00] What is fiber and why it is needed
A new implementation of React core algorithm
The goal is to increase the stability of areas like animation, layout, and gesture
The headline feature is incremental rendering, which allows to split rendering work into chunks and spread it over multiple frames
[00:07:00] The features and benefits of fiber
Ability to pause, abort, and reuse work
Ability to assign priority to different types of updates
Ability to batch updates more efficiently
Ability to avoid dropping frames by working on low-priority updates in idle time
this video was not useful as coding wise but definitely increased my knowledge as i never heard about fibre from any tutorials . thankyou for updating about it.
I've been attempting to learn React for the past couple months. However, I felt in some way that I lack the confidence to understand how to react. That's when I saw your video. I have no idea how I got hooked on this video. I sincerely thank you, Sir.
Sir, at the beginning of the video, you mentioned that it would be boring, but I didn't even realize when the video ended.💯
i generally refrain from putting up comments but your content is so good, i could not help but appreciate your work through this simple comment. thank you so much sir
I'm already watched Akshay Saini's React series, but you are a real GOAT of web dev.
Next level content . Thank you sir for this amazing session .
Kya hi sir , aapne to mereko aisa bna diya h ki jbtk ye neend nhi aati tbtk bs ye playlist chlti rhti
maine phle bhi ek bar react pdha pr chodh diya pr is itni aasan lg rhi mja aa rha pdhne me
very good explaination, please keep it up. Request you to maintain this level of explanation and I really wish that this series get famous.
thank you so much hitesh sir for providing this type of series for free .
It is very beneficial to the audiance who learn on the you tube. Thank you so much
The explanation is too simple. Love you Hitesh Sir
Web Development sikhna h to Hitesh sir ki video to dekhna hi padega. hahahaha specially this video
Glad it helped 😊❤️
@@chaiaurcode Thanks a lot Sir .I want to meet you and After getting a job. I will meet you soon
Thank you so much sir for explaining in deatails react js Without any fees☺
fav teacher and coder❤
you are great Hitesh sir !!!!
currently i'm in a service based company and i know i will be selected in top level product based company by learning and practicing content like this.
Thankyou for providing these type of videos and teaching a self learning way.
Took one Udemy course of react, It was not this much deep about VDOM.
Thank you for making videos for free.
This video is eye-opening for me! I didn't know you could learn programming this way!
sir you are best teacher in tech field
This series gonna break all records on UA-cam
Thank you sir for this in depth knowledge.
Nice Tutorial!!! Highly Recommended For Beginners and Others!!!
Sir You're one of the Bests teachers for mine, Love from pakistan ❤❤
Sir thank you ❤ aap best ho jo bhi sikhate ho best in industry
Very nice and informative video on the fibre, virtual dom and reconciliation. Thanks
VD Fibre and Reconciliation... which motivating me to learn core arichtecher 😃
This course is immaculate, thank you sir for providing such in depth knowledge for free.