The actual React implementation used to look very similar to what we've built so far, but with React 16 this has changed dramatically with the introduction of Fibers. Fibers is a name that React gives to discrete units of work during the render process. And the React reconciliation algorithm was changed to be based on small units of work instead of one large, potentially long-running call to `render`. This means that React is now able to process just part of the render phase, pause to let the browser take care of other things, and resume again. This is the underlying change that enables the experimental Concurrent Mode as well as runs most hooks without blocking the render.
The actual React implementation used to look very similar to what we've built so far, but with React 16 this has changed dramatically with the introduction of Fibers. Fibers is a name that React gives to discrete units of work during the render process. And the React reconciliation algorithm was changed to be based on small units of work instead of one large, potentially long-running call to `render`. This means that React is now able to process just part of the render phase, pause to let the browser take care of other things, and resume again. This is the underlying change that enables the experimental Concurrent Mode as well as runs most hooks without blocking the render.
But even with such a large change, the underlying algorithms that decide how and when to render components are the same. And, when not running in Concurrent Mode, the effect is still the same, as React still does the render phase in one block. So, using a simplified interpretation that doesn't include all the complexities of breaking up the process into chunks enables us to see more clearly how the process works as a whole. At this point, bottlenecks are much more likely to occur from the underlying algorithms and not from the Fibers specific details.
But even with such a large change, the underlying algorithms that decide how and when to render components are the same. And, when not running in Concurrent Mode, the effect is still the same, as React still does the render phase in one block. So, using a simplified interpretation that doesn't include all the complexities of breaking up the process into chunks enables us to see more clearly how the process works as a whole. At this point, bottlenecks are much more likely to occur from the underlying algorithms and not from the Fibers specific details.
Welcome to *Foundations of High-Performance React Applications* where we build our own simplified version of React. We’ll use our React to gain an understanding of the real React and how to build high-performance applications with it.
Welcome to *Foundations of High-Performance React Applications* where we build our own simplified version of React. We’ll use our React to gain an understanding of the real React and how to build high-performance applications with it.
@ -10,7 +11,7 @@ And while this book only specifically addresses React-DOM, the foundations apply
The code in this book is clear and simple so as to best communicate the algorithms we’ll be exploring. It is not intended to be used in production, but it is functional. I think you’ll likely find it useful to follow along by writing the code yourself. It will help you better understand how it works, and even more critically, it will allow you to play with it and test how the algorithms work with your own examples.
The code in this book is clear and simple so as to best communicate the algorithms we’ll be exploring. It is not intended to be used in production, but it is functional. I think you’ll likely find it useful to follow along by writing the code yourself. It will help you better understand how it works, and even more critically, it will allow you to play with it and test how the algorithms work with your own examples.
Even if you don't write out the code yourself and,instead, read through this book more like a novel, I believe the fundamentals will still stick with you and provide value in your React programs-to-come.
Even if you don't write out the code yourself and,instead, read through this book more like a novel, I believe the fundamentals will still stick with you and provide value in your React programs-to-come.
I'm very excited to take you on this journey with me and, so, now it's time to learn what lies at the very foundation of React.
I'm very excited to take you on this journey with me and, so, now it's time to learn what lies at the very foundation of React.
There are now only two major puzzles remaining in our quest for our own React. The next piece is `render`. How do we go from our JSM tree of nodes to actually displaying something on screen? We do this by exploring the `render` method.
There are now only two major puzzles remaining in our quest for our own React. The next piece is `render`. How do we go from our JSM tree of nodes to actually displaying something on screen? We do this by exploring the `render` method.
