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
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. Grateful for the unique perspective you bring to education!
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. */
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.
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.
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
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
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
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
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 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.🤩🤩
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 .
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.
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.
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
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
00:03 This video is important for understanding virtual DOM in React. 02:01 Exploring virtual DOM, Fibre, and reconciliation in React 03:52 Virtual DOM updates efficiently with optimization algorithms. 05:49 React Fiber is an ongoing implementation to update the Virtual DOM for improved performance. 07:41 Fiber introduces incremental rendering and the ability to assign priority to different types of updates. 09:29 React's reconciliation algorithm is a recursive algorithm that determines what needs to be updated. 11:26 Reconciliation algorithm in React's Virtual DOM 13:44 Implementing Fiber algorithm for performance optimization 15:45 Reconciliation vs Rendering is crucial for performance optimization. 17:29 Fiber is the heart of React 19:09 Learned about Virtual DOM, Fibre and reconciliation 20:42 Importance of learning tightening and oiling components
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
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 😀😊
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 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 🙏
00:27 🍵 Virtual DOM, Fiber, and reconciliation concepts are important to understand in React development. 01:48 📚 Virtual DOM in React performs updates efficiently by comparing and updating only elements that have changed in the UI. 03:54 🔄 Virtual DOM enables tracking and updating of the entire DOM structure without full page reloads, improving performance. 04:21 🔁 Virtual DOM tree in JavaScript creates a representation of the DOM structure and efficiently updates elements, essential for UI rendering. 04:50 🛑 Immediate updates may not always be necessary, optimization algorithms can be applied for updates. 05:05 🔌 React team doesn't require instantaneous updates for every user interaction. 05:20 💡 UI updates are important, and React's Fiber algorithm plays a crucial role in optimizing UI updates. 06:02 📚 React Fiber's architecture involves ongoing implementation by the React team based on research and user interface optimization. 06:29 💻 React Fiber introduces incremental rendering ability and features like suspense and spread out rendering for improved performance. 08:06 🔄 React Fiber's code implementation is complex, requiring skill and time to understand due to its algorithmic nature. 09:42 🎯 Fiber is a well-implemented algorithm, ongoing since 7 years ago. 10:10 🧩 Reconciliation in React is an algorithm to decide what to update. 11:32 🚀 Developers declare reactively about efficient transitions. 12:49 💡 Reconciliation plays a crucial role behind the scenes in React's Virtual DOM. 14:24 🔄 Virtual DOM used selectively for optimized rendering operations by React Fiber. 14:38 🧠 New algorithm in Fiber significantly improves React's reconciliation process. 15:04 ⚛ React now uses Fiber to perform updates based on stable, predictable, and unique operations. 15:30 🛠 Fiber's reconciliation vs rendering aspect is crucial for updating React applications efficiently. 16:57 🔗 React determines priorities for updating various types of operations, including JavaScript and animations. 18:59 🧩 Understanding internal architecture like Virtual DOM and reconciliation requires a good grasp of React concepts. 19:14 📚 Memorization and alternate approaches like memoization are important topics to explore once React basics are clear. 19:41 🧠 Differentiating algorithms, as seen in Fibre, plays a crucial role in understanding updates in the Virtual DOM. 20:08 💡 Personal learning is key to diving deeper into concepts like React architecture beyond what courses or RUclips tutorials cover.
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
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
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. Grateful for the unique perspective you bring to education!
Sir, aap programming bahut achi pdhate h you are my favorite instructor,
This React Course is going to be great just like the JavaScript course.
This series has become just like drugs it's quite addictive 🙏
so true
true af
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. */
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.
Yes sir, You have completed your goal to create a curiosity for exploring new tech things and go into deeper level.
It's your teaching skill that makes this video so interesting. Really yee to lack rupay ka course hain. Hats off ❤️
Sir aapke padhane ka tareqa aisa hai k aapka channel aik addiction ban chuka hai. Hats off to you Sir.
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
This Guy is the best Instructor I have even seen in my life, Love and Appreciation From Pakistan 💖
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 .
If all episodes would've been dropped at once, I would've binge watched this series
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❤❤❤❤
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
Chai with Hitesh-Choudhary Sir is Amazing
thank you itna in-depth padhane k liye. we are blessed ki hum aapke students hai
Love this react series :)
Everything is of temporary interest on Yt but
Hitesh sir's lectures have become permanent😇😍
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
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
I really appreciate your efforts for this. I mostly understood the concepts the way you are explaining. Thank you so much sir
Was waiting for this really thank you for uploading sir thanks 🙏
Sab youtuber h but aap real Guru h sir thanks
Happy Diwali sir
k = hanji kaise h aap sabhi
are sir bohooot bhadiya video tha, mai khud aur dekhunga jaake reconciliation k baare mai, aur fiber ko bhi dekhunga, thank you so much
Meja to chai mai hi hai sir, kuch bhi kho. Or wo bhi aap ke code ke saat
Kha tha mai etne din . web ka asli gyan to yha tha . Thanks a lot sir your teaching style makes you a great teacher.......
Understood the Concept of Virtual DOM, Reconciliation completely and get a little bit idea of Fibre as well....Thanks 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.
App dhanya hain Hitesh ji jo is level ka content YT pe free mein padha rahe hain. KUDOS ❤
Title Correction : Fiber instead of Fibre
Much needed video ! 🙇🏻
can't belive this kind of content are free on youtube
i am very thankful of god for giving opportunity to watched out these type of content on RUclips
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 😊
Pehli baar kisi theory/core video itne concentration se dekh raha tha. Aisa lag raha hei ye video series bht late mila mujhe.
Loved your way of teaching , how you makes concept crstal clear using a story.😌
😮
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
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
Great knowledge is delivered by Hitesh Sir with so much depth.
Sir next level knowledge you are providing us. You are creating excitement regarding code, library, inner workings.
Very helpful channel you clear all the concepts and cover all the topics very easily . Thank You so much for building my confidence .
New and Interesting concepts never heard before
Thank you Sir for sharing your lvl of experience with us ❤
What a great explanation. The complex document felt so simple You are great Sir
Best guru i ever found...no need to go coaching ❤🎉
Thank you so much Hitesh sir
Thank you sir for this in depth knowledge.
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 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.🤩🤩
Completed with 6th lecture. Thankyou Sir for this wonderful lecture. Loving the series.
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
Amazing way of teaching with next level of concepts.....................#Best_Series
One of the best teachers in the world .
Thanks hitesh bhaiya❤
Thank you so much HItesh Sir ❤🙌
thank you so much hitesh sir for providing this type of series for free .
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 💟
Sir aap Top Ho hum sab web students ki hope ho 😊
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 RUclips🙏.
Perfect clarification ❤❤❤❤❤❤❤❤❤❤
fav teacher and coder❤
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.
OP sir, there is only one teacher on RUclips and that is you sir, rest all are just content creators.
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.
you are the experienced teacher and your explanation is very clear
I'm already watched Akshay Saini's React series, but you are a real GOAT of web dev.
Htesh Sir, you are amazing I m learning this theory with you @5.30 AM
Once again thank you.
Next level content . Thank you sir for this amazing session .
It is very beneficial to the audiance who learn on the you tube. Thank you so much
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
This series gonna break all records on RUclips
Sir, at the beginning of the video, you mentioned that it would be boring, but I didn't even realize when the video ended.💯
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
The explanation is too simple. Love you Hitesh Sir
Thank you for providing useful knowledge ❤❤❤❤
00:03 This video is important for understanding virtual DOM in React.
02:01 Exploring virtual DOM, Fibre, and reconciliation in React
03:52 Virtual DOM updates efficiently with optimization algorithms.
05:49 React Fiber is an ongoing implementation to update the Virtual DOM for improved performance.
07:41 Fiber introduces incremental rendering and the ability to assign priority to different types of updates.
09:29 React's reconciliation algorithm is a recursive algorithm that determines what needs to be updated.
11:26 Reconciliation algorithm in React's Virtual DOM
13:44 Implementing Fiber algorithm for performance optimization
15:45 Reconciliation vs Rendering is crucial for performance optimization.
17:29 Fiber is the heart of React
19:09 Learned about Virtual DOM, Fibre and reconciliation
20:42 Importance of learning tightening and oiling components
Ab fir agale din yah wapis dekhunga
You are the best
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
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 😀😊
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.
This video is eye-opening for me! I didn't know you could learn programming this way!
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 🙏
One of the best video of this series ❤
00:27 🍵 Virtual DOM, Fiber, and reconciliation concepts are important to understand in React development.
01:48 📚 Virtual DOM in React performs updates efficiently by comparing and updating only elements that have changed in the UI.
03:54 🔄 Virtual DOM enables tracking and updating of the entire DOM structure without full page reloads, improving performance.
04:21 🔁 Virtual DOM tree in JavaScript creates a representation of the DOM structure and efficiently updates elements, essential for UI rendering.
04:50 🛑 Immediate updates may not always be necessary, optimization algorithms can be applied for updates.
05:05 🔌 React team doesn't require instantaneous updates for every user interaction.
05:20 💡 UI updates are important, and React's Fiber algorithm plays a crucial role in optimizing UI updates.
06:02 📚 React Fiber's architecture involves ongoing implementation by the React team based on research and user interface optimization.
06:29 💻 React Fiber introduces incremental rendering ability and features like suspense and spread out rendering for improved performance.
08:06 🔄 React Fiber's code implementation is complex, requiring skill and time to understand due to its algorithmic nature.
09:42 🎯 Fiber is a well-implemented algorithm, ongoing since 7 years ago.
10:10 🧩 Reconciliation in React is an algorithm to decide what to update.
11:32 🚀 Developers declare reactively about efficient transitions.
12:49 💡 Reconciliation plays a crucial role behind the scenes in React's Virtual DOM.
14:24 🔄 Virtual DOM used selectively for optimized rendering operations by React Fiber.
14:38 🧠 New algorithm in Fiber significantly improves React's reconciliation process.
15:04 ⚛ React now uses Fiber to perform updates based on stable, predictable, and unique operations.
15:30 🛠 Fiber's reconciliation vs rendering aspect is crucial for updating React applications efficiently.
16:57 🔗 React determines priorities for updating various types of operations, including JavaScript and animations.
18:59 🧩 Understanding internal architecture like Virtual DOM and reconciliation requires a good grasp of React concepts.
19:14 📚 Memorization and alternate approaches like memoization are important topics to explore once React basics are clear.
19:41 🧠 Differentiating algorithms, as seen in Fibre, plays a crucial role in understanding updates in the Virtual DOM.
20:08 💡 Personal learning is key to diving deeper into concepts like React architecture beyond what courses or RUclips tutorials cover.
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 series is a Goldmine for learning react.
Thankyou sir for the amazing content
Sir You're one of the Bests teachers for mine, Love from pakistan ❤❤
🎉🎉thank you so much sir❤❤❤love you