This was so detailed, and replay is an amazing software, I never knew this kind of thing even existed. Thank you for these series, I am always afraid to dive into the codebase of a language, but looking at this, even though I might not know a lotx it still helps to get a good understanding of how things work behind the scenes
I have to say I wasn't fan of your conference talks but I take it back - very nice videos, would love to see even more of a deep dive into react internals
Thanks a lot! 👍 I initially started this interview prep, but it unexpectedly sparked my curiosity, and I've been diving deep into understanding how everything comes together and works. It's been quite an interesting journey! 😄
Great explanation. I have one question. let's say while creating fiber tree in render phase another high priority task came like input. so current workInProgress will run in background and input workInProgress starts and finishes and painted on DOM. So, wouldn't old workInProgress will have old copy of fiber?
Thank you so much for such wonderfull explanation with demonstration. I am bit confused though. Like, if reactjs constructs this fiber tree then Is the "Virtual DOM " == "fiber tree" ? OR "Virtual DOM " is calculated again based on fiber tree ? or its something else.
Thank you for your content, it is really treasure about React and web in general. I would be glad to see similar content, maybe about event loop in time loop with details, about render phases in browser, when it is blocked, when it is layoted, composed, painted and so on. Maybe how to handle async functions in usual for-loop and such other content. Thank you again!
Amazing video! Would be awesome if you could make a video on how to create a custom react renderer and also a video about how does the Canvas state is handled/related to the React state? I know these videos are hard to make, thank you for taking the time to create it, helps a lot!
Awesome bro! Keep going! How do React actually perform commit of the root node? If we will do append child of the entire document it should be slow... I was thinking about it that React updates only necessary DOM nodes. But as I understand from yours explanation React updates all nodes in commit phase
Hey Tejas, I have a question I'm wondering if you can clarify for me regarding the beginWork() phase. From what I can tell, it seems like the beginWork() phase not only marks the fibers for work updates, but also creates new fibers if they aren't already existing and being copied over from the Current fiber tree?? I'm trying to figure out if the beginWork() function ONLY marks fibers for updated work, if if it is also responsible for assembling the work in progress tree? And if it isn't responsible, what DOES assemble the work in progress tree? I'm aware of functions like createFiberFromElement(). Hopefully my question makes sense?
Its awesome!!! Just awesome explanation of going though the actual src code!! A big thanks to you Tejas! It would be great if you could help me in solving just one doubt.. So, regarding the Virtual DOM ---> Its basically a tree of React elements. Therefore, this particular JSX 1st span child Click
Okay done
boils down to this object creation: { type: "div" ref: null key: null props:{ children:[ {type: "span", props:{ prps1: "Hello", children: "1st span child" }, {type: "button", ......}, {type: "div", ...............} ] } } and this is what we call as VDOM. (please correct me if I'm wrong) So when the state is changed, the VDOM is created again with new object references, and React makes a diff between the old VDOM nodes and new VDOM nodes, and whenever it finds the changes it lists them them down in a list, which are then flushed to the DOM in the commit phase. Now my question is, for Fiber Reconcilliation, does the same architecture of the VDOM creation happens followed by this, the current and workInProgress, and then the changes are flushed to the DOM based on effects list? Or how does this new Fiber fit into the structure of comparing old VDOM and new VDOM and tagging the nodes that need an update? Like how does this work with the Fiber? I know its a lot for you to look upon over here in the youtube comment section, but it would be great if you could solve my doubt. I am really tangled in here..
@@shakyasarkar7143 not sure that this completely answers your questions, but this is written in the legacy React docs: "In React world, the term “virtual DOM” is usually associated with React elements since they are the objects representing the user interface. React, however, also uses internal objects called “fibers” to hold additional information about the component tree. They may also be considered a part of “virtual DOM” implementation in React." i might be wrong, but based on that, it sounds like Fiber is what actually creates the VDOM for React
Thanks!
WOW, thanks for this!!!
Thanks, Suraj for making this video. You are a great teacher and communicator also your content is very riveting
@@ShivamSharma-dq4pu who is suraj
@@tejask jeez mother hugging Christ! I can explain. I was in the kitchen boiling water while typing and sorry I messed up with your name. sorry Tejas
@@tejask 😂😂
Best deep information on youtube about Fiber!
Glad you like it
i got hooked onto ur video when u first explained how react hooks worked internally. never regretted, Love this!!
Awesome! Thank you!
Can you share the link of this video ?
This was so detailed, and replay is an amazing software, I never knew this kind of thing even existed. Thank you for these series, I am always afraid to dive into the codebase of a language, but looking at this, even though I might not know a lotx it still helps to get a good understanding of how things work behind the scenes
Happy to help!!
@tejask I have no words to express how thrilled I'm watching this video. So inspiring! Keep going, you rock!
Wow, thank you so much! I hope it adds value to you!
I am your fan since i watched your destructuring react video.. i feel glad we have people like you in our developer communinty❤
I have to say I wasn't fan of your conference talks but I take it back - very nice videos, would love to see even more of a deep dive into react internals
Why weren’t you a fan of my talks? The feedback will help me grow.
Thanks a lot! 👍 I initially started this interview prep, but it unexpectedly sparked my curiosity, and I've been diving deep into understanding how everything comes together and works. It's been quite an interesting journey! 😄
Appreciate it!!
Replay is bonkers! I wasn't aware it was this powerful!
Also thanks for such a great breakdown and demo of how reconciliation works
Glad it was helpful!
Next level knowledge, on point. Kudos to you man!.
Great explanation. I have one question.
let's say while creating fiber tree in render phase another high priority task came like input. so current workInProgress will run in background and input workInProgress starts and finishes and painted on DOM. So, wouldn't old workInProgress will have old copy of fiber?
Man !.. You are already doing great job!❤️
Can you please cover topics like advanced patterns , optimization and related to writing performant code !
Yes
@@tejask wow man.. thanks in advance!❤️
wowyy, could you bring more explanations on advance UI patterns ?
Yea 100%.
Thank you so much for such wonderfull explanation with demonstration. I am bit confused though. Like, if reactjs constructs this fiber tree then Is the "Virtual DOM " == "fiber tree" ? OR "Virtual DOM " is calculated again based on fiber tree ? or its something else.
Thank you for your content, it is really treasure about React and web in general. I would be glad to see similar content, maybe about event loop in time loop with details, about render phases in browser, when it is blocked, when it is layoted, composed, painted and so on. Maybe how to handle async functions in usual for-loop and such other content. Thank you again!
Hello! I want to know how you debug in the browser and how you code in the browser? Can you introduce it? thank you!
Yes I can
Masterpiece.
Thanks!
Amazing video! Would be awesome if you could make a video on how to create a custom react renderer and also a video about how does the Canvas state is handled/related to the React state?
I know these videos are hard to make, thank you for taking the time to create it, helps a lot!
i really like replay part where i actually how the processes happening
Awesome bro! Keep going!
How do React actually perform commit of the root node?
If we will do append child of the entire document it should be slow...
I was thinking about it that React updates only necessary DOM nodes. But as I understand from yours explanation React updates all nodes in commit phase
It does necessary only update the different host nodes based on diffing the VDOM with the DOM.
Awesome 👍
Thanks 🤗
why this video has very less views this is amazing
subscribe
wow! this was something really cool.
Share it with your friends!
Thanks mate. Now I can breathe well, after watching this😅
Glad it’s helpful!
@@tejask It is highly useful, where did you learn these kind of stuff?
Hey Tejas, I have a question I'm wondering if you can clarify for me regarding the beginWork() phase.
From what I can tell, it seems like the beginWork() phase not only marks the fibers for work updates, but also creates new fibers if they aren't already existing and being copied over from the Current fiber tree??
I'm trying to figure out if the beginWork() function ONLY marks fibers for updated work, if if it is also responsible for assembling the work in progress tree?
And if it isn't responsible, what DOES assemble the work in progress tree?
I'm aware of functions like createFiberFromElement().
Hopefully my question makes sense?
Dayum 🔥
Okay so oooooo 😈 I was bout to blast you for the svelte thingy 😄😄😄
😂😂😂
awesome, thx
it's so deep
Is that a good thing or a bad thing?
@@tejask i love it
❤
❤️
Ah, that's a cool svelte shirt
Thanks!
Great video, You Could've shown how input from a user action takes priority over some other work like rendering animations.
Its awesome!!! Just awesome explanation of going though the actual src code!! A big thanks to you Tejas!
It would be great if you could help me in solving just one doubt..
So, regarding the Virtual DOM ---> Its basically a tree of React elements.
Therefore, this particular JSX
1st span child
Click
Okay done
boils down to this object creation:
{
type: "div"
ref: null
key: null
props:{
children:[
{type: "span",
props:{
prps1: "Hello",
children: "1st span child"
},
{type: "button", ......},
{type: "div", ...............}
]
}
}
and this is what we call as VDOM. (please correct me if I'm wrong)
So when the state is changed, the VDOM is created again with new object references, and React makes a diff between the old VDOM nodes and new VDOM nodes, and whenever it finds the changes it lists them them down in a list, which are then flushed to the DOM in the commit phase.
Now my question is, for Fiber Reconcilliation, does the same architecture of the VDOM creation happens followed by this, the current and workInProgress, and then the changes are flushed to the DOM based on effects list?
Or how does this new Fiber fit into the structure of comparing old VDOM and new VDOM and tagging the nodes that need an update? Like how does this work with the Fiber?
I know its a lot for you to look upon over here in the youtube comment section, but it would be great if you could solve my doubt. I am really tangled in here..
Anyone?
@@shakyasarkar7143 not sure that this completely answers your questions, but this is written in the legacy React docs:
"In React world, the term “virtual DOM” is usually associated with React elements since they are the objects representing the user interface. React, however, also uses internal objects called “fibers” to hold additional information about the component tree. They may also be considered a part of “virtual DOM” implementation in React."
i might be wrong, but based on that, it sounds like Fiber is what actually creates the VDOM for React
It is complicated, I cann't say I understand it 😏
What part
Thank you very much for this video 🤍
No problem 👍
Awesome thanks
Happy to help!