just published part 2 of my React internals series , this one covers what actually happens when you call setState and how does re-rendering works. part 1 (initial render): https://lnkd.in/dycpqavw part 2 (re-render): https://lnkd.in/d4tWTwmk #react #javascript #frontend #webdev
Transcript
Hi, welcome back. In this video we'll take a look at how React rerendering cycle works, what happens when a state is updated and what phases does React goes through to update that state. OK, so let's take a look at our first phase which is called the trigger phase. A trigger phase is just where the user pushes an update or triggers an update in our application. So in this example we have a count use state hook and when the user clicks this button. The set count is incremented is set count is called. The count is incremented by 1. So when this line is triggered, set count. An update object is created and the update is is pushed to the app Fiber node because the count hook is in the app Fiber or the Fiber component and then it just schedules update. So nothing actually runs yet. It's just telling that this book needs to be updated in this component. That's it. OK, so let's assume that we had. Three more calls of set count in this function. So what's going to happen? We'll see how batching actually works. So at each set count function call it's going to create, do the same thing, create this update object and queue it on to the app fiber. Rendering is also scheduled. That's that this fiber node needs to be updated. React is going to keep parsing the whole function, onclick function, and when it hits the last polybase, React is going to stop. It's going to take a look at the app fibers and it's going to see that these nodes needs to be updated. So then the actual work actually begins. And these are all happen in a single operation. All of these updates on the app fiber are done in a single operation. So that's how batching is actually done. React doesn't actually wait and stop for every single update. It batches them together and once and then take a look at the fiber tree and updates them all in one operation. Before we continue, let's take a look at where do hooks actually live? In this example we have a use state hook and divide 1 and a button element. So this is the fiber tree that is going to be created. And all of the logic that you see before the return statement is going to be attached to the. Parent component. So in our case all the hooks belongs to the app component. And this is called a function component. It contains all the hooks list, but it doesn't. It doesn't point toward any Dom element or an HTML element. While other nodes like divide 1, they points towards a HTML element, They do not contain any logic. OK, so let's take a look at another really important concept. We build the whole fiber node tree in our, uh, initial rendering phase. But um, React actually maintained 2 of these trees. The current tree which representing which is representing our current tree that the user sees and we have a working tree. So a working tree is what React rebuilds and when it's done this is what the user sees, so it doesn't directly updates the current tree. You can think of it like the virtual Dom tree in that sense that it's going to be built in the memory and then this update is going to be pushed towards the browser. So far we have learned that the user triggered an update by calling this button and the update was scheduled to the App Fiber queue here. But umm. Let's see what actually happens next. Now React wants to build the new tree here. As I mentioned that React always maintains 2 trees. This is the current tree represents the current browser. The representation of the application and the working tree is where we'll apply the new changes and we're going to build the whole tree. We also have the reconciliation algorithm which is going to compare the previous tree which is the current tree and the new changes which are happening in the working tree. Depending on the conditions or three rules for three to four rules, is going to reuse the same fiber node. It's going to just clone this same fiber node if there's no changes, or it's going to create a new fiber node. In order to create a fiber tree, we saw in our initial rendering video that React calls these two functions. The begin work function is called as we. As we parse through the whole tree. From top to bottom and complete work function is called where we go up from the child nodes. OK, let's see. Begin work is going to be called. Let me call begin work and. Complete work. OK, so the first thing is begin work calls and we pass in. The a component. So this is going to create our app fiber node. And it's going to apply the reconciliation algorithm. So. The reconciliation algorithm states that since there is no changes in the upcoming fiber tree and the previous tree, then we can just reuse the. The previous fiber node. So this is just cloned directly from the our current tree. No extra effort were needed. Put this arrow here. Next it's going to call. This division element. And is going to. Clone this as well. OK, since there's no changes then nothing actually. Uh, changed. Is going to do the same here. Is going to call begin work here as well, and here as well. But here's the difference. Our state needs to be updated to count #1. So begin work. What does begin work do? It's going to. Mark. To update this button fiber node state through 1. O it marked to update this button fiber content to 1. Currently it is 0. And now the complete complete work function is going to run. Is going to run from here according to the depth first search. It's going to run on this function. Then once it reaches this function. Now complete work. It actually updates few things here. It updates. The content and the props as well. So complete work performs. Dom node operations if needed, if new. If this was a new app component, then Dom node would create those components, create those, perform those operations in memory. This is all in memory right now, and it's going to. It updates this state. Now the state is updated. This is going to be 1. Awesome. O yeah, this was our whole rerendering phase. Let's look at our commit phase. It's a really simple phase where currently we have build. This working tree and along with all the changes and this is currently in memory right now. And the current tree is what is the user is being shown. So it does something really interesting. Our working tree becomes the current tree. And this becomes our work tree. So React swaps these trees and these update. Now this update is finally pushed to the browser and the user can see the new changes that has been done into this tree. That's the complete picture of how React renders. We saw in our initial render phase that GSD compiles function, calls those, return objects, reacts, then create these fiber nodes. It walks down this tree and calls your functions. It walks up the tree once again and create these Dom nodes in memory and it attaches all in one shot in the final commit phase. In rerendering, we saw that an update is queued on a specific fiber. Then React builds a working tree by recycling old fibers. Begin work calls. It compares the old versus new at each node. Complete work function calls and finally commit applies the minimum Dom mutations. Thanks for watching if this helped, please do like and subscribe.To view or add a comment, sign in