06 Virtual DOM, Fibre and reconciliation

[@gauravbanerjee2898]

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. */

[@kamilsiddiqui4252]

thank you gaurav bhai

[@WatchNotchK2S]

Thanks bhai nice notes

[@vishakhakhanna8115]

helpful!!!

[@xboy2374]

thanx bhai

[@adityagupta9462]

thanks a lot bhai

[@nikksanirudh]

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

[@MimicMannan]

Nice

[@arunkumar7617]

Impressive. No one touch these topics in their videos. This series is a true gem.

[@Moniverma2302]

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

[@jk-sm6qr]

I watch this video 3 times and now understood the document easily. Thank you sir ji

[@deepansh-gangwar]

Sir, aap programming bahut achi pdhate h you are my favorite instructor,

[@rohitsahu7172]

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!

[@techieimam4491]

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....😀

[@afaqahmad-ef4ky]

Congratulations to all Indians for their landing... From Pakistan ❤️😊

[@wasifurrahmanefaz4216]

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💝

[@ojal.dev.]

This React Course is going to be great just like the JavaScript course.

[@navinkumarsahu1159]

This series has become just like drugs it's quite addictive 🙏

[@MuhammadOsamaAbbas]

so true

[@parvgheewala5554]

true af

[@Sneakingmentor]

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.

[@vikassahani2874]

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

[@RakeshSingh-vl2mz]

Thanks bro

[@vikassahani2874]

@@RakeshSingh-vl2mz mention not❤

[@karkisanket294]

Good work bro

[@vikassahani2874]

​@@karkisanket294thanks for recognising ❤

[@gyanprakash2472]

a sincere thanks for the summary , keep doing

[@chaiaursafar]

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

[@toheedulhaq146]

Sir aapke padhane ka tareqa aisa hai k aapka channel aik addiction ban chuka hai. Hats off to you Sir.

[@adityadolui8633]

It's your teaching skill that makes this video so interesting. Really yee to lack rupay ka course hain. Hats off ❤️

[@09avishkargaikwad71]

Yes sir, You have completed your goal to create a curiosity for exploring new tech things and go into deeper level.

[@abhisheknaik4885]

Initially I felt the Lec would be boring but later through your stories it became more interesting , Expecting the full Course❤❤❤❤

[@mukuljain9024]

Nimbu Pani hamara bhi tayar he Bahut achhe se concepts pure ho rahe he confidence bhi in a good way badh raha Thankyou sir

[@harsh-alashi]

If all episodes would've been dropped at once, I would've binge watched this series

[@SadamShaikh-g8r]

This Guy is the best Instructor I have even seen in my life, Love and Appreciation From Pakistan 💖

[@SuryaKarigar]

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.

[@crazytechytech]

thank you itna in-depth padhane k liye. we are blessed ki hum aapke students hai

[@shikharpandya4927]

Love this react series :) Everything is of temporary interest on Yt but Hitesh sir's lectures have become permanent😇😍

[@whatappstatus6937]

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. */

[@nitishrajbongshi9311]

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.

[@abhinavgupta4866]

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.

[@rishabhinc2936]

​@@abhinavgupta4866that old dom tree is the reference of browsers dom i think

[@namannema3349]

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

[@avanidalal4758]

I really appreciate your efforts for this. I mostly understood the concepts the way you are explaining. Thank you so much sir

[@monsternika8873]

Chai with Hitesh-Choudhary Sir is Amazing

[@bacchokipasand]

Sir sach mai app itne ache sai padate ho bohot acha lgta .

[@shraj340]

k = hanji kaise h aap sabhi

[@kishanvishwakarma903]

Sab youtuber h but aap real Guru h sir thanks Happy Diwali sir

[@pratiksawant]

Was waiting for this really thank you for uploading sir thanks 🙏

[@funkyboy4882]

are sir bohooot bhadiya video tha, mai khud aur dekhunga jaake reconciliation k baare mai, aur fiber ko bhi dekhunga, thank you so much

[@Ezsnippits]

Meja to chai mai hi hai sir, kuch bhi kho. Or wo bhi aap ke code ke saat

[@vanshikasharma8685]

Very helpful channel you clear all the concepts and cover all the topics very easily . Thank You so much for building my confidence .

[@MOHDUMAIR-p5y]

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

[@VishalSharma-rn7mt]

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 😊

[@investonomy8758]

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

[@jstar3257]

Understood the Concept of Virtual DOM, Reconciliation completely and get a little bit idea of Fibre as well....Thanks Sir

[@thecalgarians4597]

App dhanya hain Hitesh ji jo is level ka content YT pe free mein padha rahe hain. KUDOS ❤

[@binayakbidyasagar1536]

Pehli baar kisi theory/core video itne concentration se dekh raha tha. Aisa lag raha hei ye video series bht late mila mujhe.

[@gauravsrivastava17]

New and Interesting concepts never heard before Thank you Sir for sharing your lvl of experience with us ❤

[@_Prabhat_EC]

Kha tha mai etne din . web ka asli gyan to yha tha . Thanks a lot sir your teaching style makes you a great teacher.......

[@rahulsuthar324]

Sir next level knowledge you are providing us. You are creating excitement regarding code, library, inner workings.

[@abhishekkashyap2984]

Loved your way of teaching , how you makes concept crstal clear using a story.😌

[@iamwaves__TMT]

😮

[@yashagrawal9621]

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.

[@siddheshshiposkar6815]

It is very beneficial to the audiance who learn on the you tube. Thank you so much

[@geekguri_tech]

Great knowledge is delivered by Hitesh Sir with so much depth.

[@nehakaler6677]

Completed with 6th lecture. Thankyou Sir for this wonderful lecture. Loving the series.

[@himanshudubey24]

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 KZbin🙏.

[@sandeepkarukayil]

What a great explanation. The complex document felt so simple You are great Sir

[@Peaceful_mind949]

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

[@namanvarshney1876]

Title Correction : Fiber instead of Fibre Much needed video ! 🙇🏻

[@M_Sajid3037]

i am very thankful of god for giving opportunity to watched out these type of content on KZbin

[@shakir0x00]

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.

[@jast_aryan-13]

Thanks sir,for this interesting lecture and deep knowledge. It is very helpful to understanding of react and its working.

[@hiteshmaurya_]

Thank you sir for this in depth knowledge.

[@naincyshrivastava5566]

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.🤩🤩

[@alanguagee]

Htesh Sir, you are amazing I m learning this theory with you @5.30 AM Once again thank you.

[@azeemdeveloper4815]

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

[@premsmishra]

Very nice and informative video on the fibre, virtual dom and reconciliation. Thanks

[@usamajabar4497]

Nice Tutorial!!! Highly Recommended For Beginners and Others!!!

[@hiphop861]

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

[@KYOUMI5]

thank you sir understood almost all ,i am very grateful that i found this playlist

[@riyagupta1652]

very informative sir..amazing way of teaching

[@aashishrai1138]

Sir aap Top Ho hum sab web students ki hope ho 😊

[@Mehak-shl]

Best guru i ever found...no need to go coaching ❤🎉

[@aakashsaini9472]

ThankYou sir. The content of this series is very well organised and i was just imagining that how much harworka and dedication is needed to build duch an increadible course and that also for free. Litterally, I have a great respect for 😀😊

[@ShubhamA_]

thank you so much hitesh sir for providing this type of series for free .

[@kmato197]

can't belive this kind of content are free on youtube

[@shubhamkashyap9708]

One of the best teachers in the world . Thanks hitesh bhaiya❤

[@visheshgupta4990]

Thank you so much HItesh Sir ❤🙌

[@akshay6023]

Next level content . Thank you sir for this amazing session .

[@surajdubey4484]

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 .

[@quickSilverXMen]

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

[@SumitKumar-nd1nd]

I'm already watched Akshay Saini's React series, but you are a real GOAT of web dev.

[@yikes3807]

Sir thank you ❤ aap best ho jo bhi sikhate ho best in industry

[@RadheRadhe-w1w3g]

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

[@ishaangarg2001]

Amazing way of teaching with next level of concepts.....................#Best_Series

[@afzalhamdulay]

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.

[@kushalmonika2881]

Thank you sir aapne bhot acche se samjhaya.

[@mr_punisher44]

thank you sir for this high level concept of react love you from the bottom of my heart❣

[@namitadas5194]

Bhai i m big fan of u. Aap bahut acche padhate ho

[@zerohell4398]

Thank you for providing useful knowledge ❤❤❤❤

[@sarthakpatwa4133]

you are the experienced teacher and your explanation is very clear

[@ankushladani496]

Story to aap ek dum ache se batate ho...😊

[@sky_9460]

very good explaination, please keep it up. Request you to maintain this level of explanation and I really wish that this series get famous.

[@PraveenSaini-yo7kq]

Thank you so much sir for explaining in deatails react js Without any fees☺

[@kayumkhan_kks]

OP sir, there is only one teacher on KZbin and that is you sir, rest all are just content creators.

[@ajaysinghrathour8622]

Web Development sikhna h to Hitesh sir ki video to dekhna hi padega. hahahaha specially this video

[@chaiaurcode]

Glad it helped 😊❤️

[@ajaysinghrathour8622]

@@chaiaurcode Thanks a lot Sir .I want to meet you and After getting a job. I will meet you soon

[@Naman_Srivastav]

Sir, at the beginning of the video, you mentioned that it would be boring, but I didn't even realize when the video ended.💯

[@shubhamade4628]

thank you sir for your dedication towards teaching

[@hamzasajid7973]

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.

[@kartiklabhshetwar4317]

This video is eye-opening for me! I didn't know you could learn programming this way!

[@jayrai18]

21:10 sir till today, I never see this much level of content on youtube. Salue to you sir 💟

[@livelife3051]

Sir You're one of the Bests teachers for mine, Love from pakistan ❤❤

[@pranavprakash6333]

Your teaching makes us love coding rather than just learning it.🙏🙏

[@satishkumar-oi3rr]

The explanation is too simple. Love you Hitesh Sir

[@PrashantKumarSingh-y8n]

Bro i think these kind stuff is much needed 😅 ye wo andar ki batein hai jo koi khi nai bta rha hai h