React Fiber is a new coordination engine or way of reimplementing core algorithms introduced in React 16. Its main goal is to solve the limitations caused by JavaScript's single-threaded execution model and improve the responsiveness and performance of React applications by implementing time slicing.
2. The core problem of Fiber: limitations of single thread
JavaScript is single-threaded, which means it can only perform one task at a time. In React applications, this single-threaded model leads to the following problems when rendering a large number of components or handling complex state updates:
- Long-term task blocking: A large amount of calculations may block the main thread, causing other tasks such as user interaction and animation to be unable to respond in time.
- Unable to interrupt and resume: Once you start the rendering process, you must complete the entire process without pausing or giving up midway.
- Lack of priority concept: All update tasks are considered equally important, and more urgent updates cannot be prioritized.
3. Fiber’s solution: time slicing and new coordination algorithm
The Fiber architecture addresses the limitations of single threading through two core concepts:
2.1 Time Slicing
Time slicing allows React to break rendering work into small units of work and spread those units of work across multiple frames. This means:
- React can perform a small piece of work every frame.
- Between the two units of work, React can give up control to the browser, allowing the browser to handle high-priority tasks such as user input and running animations.
- If there is higher priority work to be performed, React can interrupt the current rendering process and handle urgent tasks first.
2.2 New coordination algorithm
Fiber introduces a new coordination algorithm with the following features:
- Interruptible and Resumeable: The rendering process can be interrupted and resumed later without losing state.
- Priority Scheduling: Different updates can be given different priorities, allowing React to handle the most urgent updates first.
- Error boundary improvements: Provides a more powerful and consistent error handling mechanism.
4. How Fiber works
How the Fiber architecture works can be summarized in the following key points:
4.1 Fiber nodes and Fiber trees
- Each React element corresponds to a Fiber node.
- Fiber nodes form a tree structure called a Fiber tree.
- Each Fiber node contains information such as the component's status, props, and work to be performed.
4.2 Work cycle and priority
- React uses a work loop to traverse the Fiber tree.
- In every frame, React checks to see if there is still time to continue performing work.
- If there is not enough time, React will pause the current work and return control to the browser.
- Work will be given different priorities, and React will prioritize high-priority work.
4.3 Two main stages
Fiber's working process is divided into two main stages:
- Render phase (interruptible):
- Build or update Fiber trees
- Execute the Reconciliation process
- Collect the side effects that need to be executed (Effect List)
- Commit phase (uninterruptible):
- Update DOM based on Effect List
- Call life cycle methods and hooks
- Handle ref etc.
5. Fiber learning route
Then we will divide it into four chapters to complete the study of Fiber. After understanding these four chapters, we will understand the implementation of Fiber.
- React Fiber architecture: core principles and implementation of scheduling
- React Fiber architecture: in-depth analysis of task queue, interruptible rendering, scheduling, and synchronization mode
- React Fiber architecture: linked list, Fiber node and Fiber tree
- React Fiber architecture: Creation, update, and submission of React Fiber