06 Virtual DOM, Fibre and reconciliation
Вставка
- Опубліковано 22 сер 2023
- Visit chaicode.com for all related materials, community help, source code etc.
Sara code yaha milta h
github.com/hiteshchoudhary/
Discord pe yaha paaye jaate h:
hitesh.ai/discord
Instagram pe yaha paaye jaate h:
/ hiteshchoudharyofficial - Розваги
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
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
This series has become just like drugs it's quite addictive 🙏
so true
true af
Impressive. No one touch these topics in their videos. This series is a true gem.
Congratulations to all Indians for their landing...
From Pakistan ❤️😊
This React Course is going to be great just like the JavaScript course.
This course is immaculate, thank you sir for providing such in depth knowledge for free.
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!
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 😊
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
I watch this video 3 times and now understood the document easily. Thank you sir ji
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💝
What a great explanation. The complex document felt so simple You are great Sir
Great knowledge is delivered by Hitesh Sir with so much depth.
Kha tha mai etne din . web ka asli gyan to yha tha . Thanks a lot sir your teaching style makes you a great teacher.......
Yes sir, You have completed your goal to create a curiosity for exploring new tech things and go into deeper level.
If all episodes would've been dropped at once, I would've binge watched this series
Sir , Ek hi dil hain kitna bar jetogee! The way you refine the concepts and make ourselves confident in React that it's interesting and teaching can't be more fun than this
Sir sach mai app itne ache sai padate ho bohot acha lgta .
It's your teaching skill that makes this video so interesting. Really yee to lack rupay ka course hain. Hats off ❤️
The explanation is too simple. Love you Hitesh Sir
Sir i love how you deliver the knowledge so easily ,This is best serious on whole utube ❤❤
i am very thankful of god for giving opportunity to watched out these type of content on UA-cam
Love this react series :)
Everything is of temporary interest on Yt but
Hitesh sir's lectures have become permanent😇😍
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....😀
Sir, aap programming bahut achi pdhate h you are my favorite instructor,
you are the experienced teacher and your explanation is very clear
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
are sir bohooot bhadiya video tha, mai khud aur dekhunga jaake reconciliation k baare mai, aur fiber ko bhi dekhunga, thank you so much
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
Initially I felt the Lec would be boring but later through your stories it became more interesting , Expecting the full Course❤❤❤❤
Nimbu Pani hamara bhi tayar he
Bahut achhe se concepts pure ho rahe he confidence bhi in a good way badh raha
Thankyou sir
App dhanya hain Hitesh ji jo is level ka content YT pe free mein padha rahe hain. KUDOS ❤
Loved the content, the quality and the way of explaining
Best guru i ever found...no need to go coaching ❤🎉
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
Story to aap ek dum ache se batate ho...😊
Next level content . Thank you sir for this amazing session .
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 .
Was waiting for this really thank you for uploading sir thanks 🙏
Understood the Concept of Virtual DOM, Reconciliation completely and get a little bit idea of Fibre as well....Thanks Sir
Loved your way of teaching , how you makes concept crstal clear using a story.😌
😮
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.
I really appreciate your efforts for this. I mostly understood the concepts the way you are explaining. Thank you so much sir
Amazing way of teaching with next level of concepts.....................#Best_Series
very good explaination, please keep it up. Request you to maintain this level of explanation and I really wish that this series get famous.
This video is eye-opening for me! I didn't know you could learn programming this way!
Sir you are literrally motivation to all of us... Hatts of to u sir... ❤
Pehli baar kisi theory/core video itne concentration se dekh raha tha. Aisa lag raha hei ye video series bht late mila mujhe.
Thq sir ittni knowledge wali videos banane ke liye.
Really high level content| watched the complete video and waiting for the next one | thanks for the video
Chai with Hitesh-Choudhary Sir is Amazing
fav teacher and coder❤
Thank you sirji the way your are explaining the react concepts is fantastic ❤❤❤
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
OP sir, there is only one teacher on UA-cam and that is you sir, rest all are just content creators.
This video is worth every second.
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🙏.
Boht Shukriya Hitesh Bhai! Love from Karachi, Pakistan ❤❤
One of the best teachers in the world .
Thanks hitesh bhaiya❤
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.
Guruji app jesa koi nahi. I really appreciate your effort for making such content from my heart. Really loved it sirji lots of love. Hope we will meet someday.
Sir next level knowledge you are providing us. You are creating excitement regarding code, library, inner workings.
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
Sir thank you ❤ aap best ho jo bhi sikhate ho best in industry
This series gonna break all records on UA-cam
Sir, at the beginning of the video, you mentioned that it would be boring, but I didn't even realize when the video ended.💯
Very helpful video, Thankyou @Hitesh Sir
This series gonna break all records on UA-cam 🔥🔥🔥
i dont any word for this series as well as hitesh sir
Thank you Hitesh sir for providing this content
one of the best video about react fibre on youtube ...😍
You are good, makes me want to watch more. you present in a very interesting way.
Great work! Thanks for all the hard work!
Completed with 6th lecture. Thankyou Sir for this wonderful lecture. Loving the series.
I'm already watched Akshay Saini's React series, but you are a real GOAT of web dev.
New and Interesting concepts never heard before
Thank you Sir for sharing your lvl of experience with us ❤
21:10 sir till today, I never see this much level of content on youtube. Salue to you sir 💟
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.
🔥This series is a Goldmine for learning react.
Very nice and informative video on the fibre, virtual dom and reconciliation. Thanks
amazing sir big fan since 4 years
Ab fir agale din yah wapis dekhunga
You are the best
this series will be greatest series of all time
Maza agya in-depth knowledge jaan ke
Love this series ❤.
Great video , learned a lot about Fibre and reconciliation
sir you are best teacher in tech field
Best video until now !!!
With every vdo my react concepts getting more xlear thanks a ton to the legend
Thank you sir for this in depth knowledge.
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.
It is very beneficial to the audiance who learn on the you tube. Thank you so much
Sir aap Top Ho hum sab web students ki hope ho 😊
amazing explanation by Sir Hitesh
This help clearing all those complex concepts...🎉
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
Best series till now❤
really appreciable content sirr..Thank youu