Rendering Phases

[00:00:00]
>> Steve Kinney: Like I said, something more important comes in, it can, you know, deal with it, start over, whatever. And really, the way that it does this, if we think about like our original understanding of the very simplistic chart we saw at one point, like however many years ago, about the virtual DOM, which is like changing the DOM is expensive. The browser has to figure out, even if you just add a CSS class, the browser doesn't know if that just made the entire layout of the page change or not, so it has to do everything and figure it out.

[00:00:30]
So the first kind of, you know, galaxy brain thought of React was, what if we do all that stuff in memory away from the DOM with a virtual DOM, a fake DOM that we can just edit with no consequence, right, because it's not, and then we'll figure out what the changes ended up being, and we'll make those, right? Effectively with React Fiber, not only do you have the entire tree broken up into small little chunks put on like an assembly line, you also have two trees.

[00:01:00]
Right? And you have the current tree, that is what is referenced in the DOM. And then you have what is called a work-in-progress tree, right? And that work-in-progress is what it was in the middle of doing. So if something more important comes along, and it needs to abandon what it was doing, you have a fresh copy that's not half updated, that it can just swap back to, right? So it's keeping a backup, doing its thing, and they can go ahead and go back to that backup if it needs to, right?

[00:01:31]
So, the rendering phase, because we do render is when we figure out what the changes meant, commit is when we make it happen to the DOM, right? Render, we take the next fiber, we call this function begin work, doesn't matter. I'll talk about what render lanes are in a second, don't worry. We call the function derive the children, just like we always thought about in React. If there are children, descend.

[00:01:53]
If not, bubble up that complete work back up so we can collect any effects along the way. But every so often, again, like whether it's every, you know, before every paint, it aims for about every 5 milliseconds, but like if there's something expensive happening, theoretically it could get blocked for a second or two. But it will try every 5 milliseconds to go like, hey, should I? Should I let some other things happen here?

[00:02:19]
Right? And again, there are heuristics like, did anything change? Is it that time? Right? Like there are some just kind of high level heuristics that are technically, like we'll consider them private APIs, you know, the React team could change them at any point. So the exact timings aren't necessarily the important part, the idea that it checks in, right? If yes, it pauses for a moment, let the browser have the wheel back, do whatever it needs to do, CSS animations, let me check to see if any other state changes happened.

[00:02:48]
Cool. Either I pick up where I left off, or the world has changed, new things have come to light, and nothing I was doing matters anymore. And at which point we start over, right? But that is again, the alternative that's wasted work. I would argue continuing to do that when it didn't matter anymore is the wasted work, right? We're getting very philosophical here, but it's fine.