06 Virtual DOM, Fibre and reconciliation
HTML-код
- Опубликовано: 10 сен 2024
- Visit chaicode.com for all related materials, community help, source code etc.
Sara code yaha milta h
github.com/hit...
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
Impressive. No one touch these topics in their videos. This series is a true gem.
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
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
Congratulations to all Indians for their landing...
From Pakistan ❤️😊
This series has become just like drugs it's quite addictive 🙏
so true
true af
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.
Your teaching makes us love coding rather than just learning it.🙏🙏
Sir, aap programming bahut achi pdhate h you are my favorite instructor,
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!
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.
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....😀
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
It's your teaching skill that makes this video so interesting. Really yee to lack rupay ka course hain. Hats off ❤️
Initially I felt the Lec would be boring but later through your stories it became more interesting , Expecting the full Course❤❤❤❤
I really appreciate your efforts for this. I mostly understood the concepts the way you are explaining. Thank you so much sir
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
If all episodes would've been dropped at once, I would've binge watched this series
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
Chai with Hitesh-Choudhary Sir is Amazing
Nimbu Pani hamara bhi tayar he
Bahut achhe se concepts pure ho rahe he confidence bhi in a good way badh raha
Thankyou sir
Was waiting for this really thank you for uploading sir thanks 🙏
Yes sir, You have completed your goal to create a curiosity for exploring new tech things and go into deeper level.
k = hanji kaise h aap sabhi
App dhanya hain Hitesh ji jo is level ka content YT pe free mein padha rahe hain. KUDOS ❤
Meja to chai mai hi hai sir, kuch bhi kho. Or wo bhi aap ke code ke saat
Sir sach mai app itne ache sai padate ho bohot acha lgta .
Understood the Concept of Virtual DOM, Reconciliation completely and get a little bit idea of Fibre as well....Thanks 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 😀😊
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
Loved your way of teaching , how you makes concept crstal clear using a story.😌
😮
thank you so much hitesh sir for providing this type of series for free .
New and Interesting concepts never heard before
Thank you Sir for sharing your lvl of experience with us ❤
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
are sir bohooot bhadiya video tha, mai khud aur dekhunga jaake reconciliation k baare mai, aur fiber ko bhi dekhunga, thank you so much
Sir, bhale hi thoda samaj aaya but bor nahi hue, really enjoy this 21:21 😊. At least imagine Kiya.
Bs yahi to chahiye
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.🤩🤩
In React, reconciliation is the process where React updates the DOM to match the current state of the components.
Here's a simple explanation:
Component Renders: When a component's state or props change, React needs to update the UI.
Virtual DOM: React uses a lightweight copy of the actual DOM, called the virtual DOM. When changes happen, React compares the current virtual DOM with the previous one. This process is called "diffing."
Efficient Updates: After the diffing process, React figures out what exactly changed (like a text update or a new element). Instead of re-rendering the whole page, React only updates the parts that changed.
This makes React fast and efficient by minimizing changes to the real DOM.
Pehli baar kisi theory/core video itne concentration se dekh raha tha. Aisa lag raha hei ye video series bht late mila mujhe.
i am very thankful of god for giving opportunity to watched out these type of content on RUclips
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.
Took one Udemy course of react, It was not this much deep about VDOM.
Thank you for making videos for free.
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.
21:10 sir till today, I never see this much level of content on youtube. Salue to you sir 💟
Sir You're one of the Bests teachers for mine, Love from pakistan ❤❤
thank you sir understood almost all ,i am very grateful that i found this playlist
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
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
The reconciliation process uses a alogorithm which is known as diff algo which is used to compare both the dom tree. i.e - the virtual dom and the real dom and only updated the part the real dom which is changed in the virtual dom and this is why react is fast !!
Thank you so much sir for explaining in deatails react js Without any fees☺
fav teacher and coder❤
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
Thank you sir for this in depth knowledge.
Thank you sir for your efforts, very good explanation. Thank you very much.
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
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.
Sir aap Top Ho hum sab web students ki hope ho 😊
Very helpful channel you clear all the concepts and cover all the topics very easily . Thank You so much for building my confidence .
Sir next level knowledge you are providing us. You are creating excitement regarding code, library, inner workings.
thank you sir for your dedication towards teaching
What a great explanation. The complex document felt so simple You are great Sir
I'm already watched Akshay Saini's React series, but you are a real GOAT of web dev.
Ab fir agale din yah wapis dekhunga
You are the best
Completed with 6th lecture. Thankyou Sir for this wonderful lecture. Loving the series.
Best guru i ever found...no need to go coaching ❤🎉
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 🙏
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
Kha tha mai etne din . web ka asli gyan to yha tha . Thanks a lot sir your teaching style makes you a great teacher.......
Nice Tutorial!!! Highly Recommended For Beginners and Others!!!
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🙏.
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 aap jis level ki knowledge share kar rahe hai, us level ki knowledge aur kisine kabhi nahi share kiya, Thank you so much Sirji 😊
basically, multiple updates might come to the page. Virtual DOM only puts the updates to the already existing page, and it tracks that using diff trees. Fibre is a new structure that stores and optimizes which/how many updates are updated to the screen in which way
Not able to understand properly in one go , but i will read it again , Thanku hitesh 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
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.
amazing explanation by Sir Hitesh
One of the best video of this series ❤
Next level content . Thank you sir for this amazing session .
Explation of hitesh sir is literally like booom ......... kya hi bol du words hi nhi hai
while seeing this react leacuter our channel Chai aur code hit 300k subscriber congratulation to all our chai aur code family💥💫
Thanks
Best React Course ever 🔥🔥
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.
Reconciliation in React is the process of comparing the new virtual DOM with the previous one and efficiently updating only the parts of the real DOM that have changed.
In React, reconciliation is the process where React updates the DOM to match the current state of the components.
Here's a simple explanation:
Component Renders: When a component's state or props change, React needs to update the UI.
Virtual DOM: React uses a lightweight copy of the actual DOM, called the virtual DOM. When changes happen, React compares the current virtual DOM with the previous one. This process is called "diffing."
Efficient Updates: After the diffing process, React figures out what exactly changed (like a text update or a new element). Instead of re-rendering the whole page, React only updates the parts that changed.
This makes React fast and efficient by minimizing changes to the real DOM.
very informative sir..amazing way of teaching
OP sir, there is only one teacher on RUclips and that is you sir, rest all are just content creators.
Great knowledge is delivered by Hitesh Sir with so much depth.
It is very beneficial to the audiance who learn on the you tube. Thank you so much
🫡🫡🫡..... much more better than paid courses...... huge respect for hitesh sir... ❤
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
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.
Bhai i m big fan of u. Aap bahut acche padhate ho
Sir, at the beginning of the video, you mentioned that it would be boring, but I didn't even realize when the video ended.💯
Thank you sir aapne bhot acche se samjhaya.