Table of Contents
React Fiber is an ongoing reimplementation of React’s core algorithm. It is the culmination of over two years of research by the React team.
Prerequisites
A few things to know before diving into React Fiber:
- React Components, Elements, Instances
- Reconciliation
- React Basic Theoretical Concepts
- React design Principles
Reconciliation
Reconciliation is an algorithm that React uses to distinguish one DOM tree from another to determine which parts need to be changed.
For example, when you render your React application, a tree including nodes describing that application will be created and saved in memory. This tree is then reassembled to match the rendering environment (compare with old tree to calculate what operations are needed to update React app).
Reconciliation vs Rendering
Reconciliation and Rendering are separate stages.
Reconciler does the work of calcutation what parts of tree are changed. Besides, Renderer uses that infomation to update rendered application.
Scheduling
Scheduling is a process of determine when a job is executed. Important points are:
- In a user interface, it is necessary to update everything at once. In fact, doing so can be very wasteful, causing frame drops (FPS)
- There are two approaches: one will need the application or yourself - the programmer decides the schedule of work or one way will let the framework here be React to decide for you.
React is currently not using scheduling properly. Re-rendering seems to be done immediately upon changes. Leveraging the benefits of planning was a key idea for moving forward with Fiber.
React Fiber
Fiber primary goal is to enable React to take advantage of Scheduling
Specifically we need:
- Stop the work and return to execulation after
- Set priority for different works
- Reuse completed works
- Ignore works that are no longer needed
To do this, we first need a way to break down a task into smaller units. In a sense, a Fiber represents a unit of work. Going back to the idea in “React Components as functions of data”, usually expressed as v = f(d).
Rendering a React app like a fucntion call that contains calls to other functions and so on. The way that typical computers trace an execution of a program is using the Call Stack. When a function is executed, a Stack Frame is added to the queue, that Stack Frame represents the work executed by that function.
When working with user interfaces, a problem here is that there are many works executed at once, it might cause Animation to drop FPS and look terible. Addition, some works might become unnecessary if they are replaced by more recent updates. This is where the comparision of UI elements and functions is break down because normally components have more specific relationships than functions.
Newer browsers install APIs to help indicate the problem. requestIdleCallback schedules a low priority function to be called during idle and requestAnimationFrame schedules high priority functions that can be called in next frame. The point is that you need to breakdown render tasks to small units to use those APIs. If you just depend on Call Stack, it will work until stack is empty. It would be better if we can modify behavior of Call Stack to optimize UI rendering? It would be better if we’re able to interrupt Call Stack as we like and control Stack Frame manually. That is the goal of React Fiber.
Besides scheduling, handling Stack Frames manually opens up the potential for features like Concurrency and Error Boundaries.