Table of contents

Introduction

1.1.

React Reconciliation

1.2.

DOM(Document Object Model)

1.3.

Stack Reconciler

1.4.

Element

1.5.

Reconciliation Vs. Rendering

What is the need for the new architecture?

Elements rendered into DOM

What is React Fiber?

React Fiber Architecture

Frequently Asked Questions

Key Takeaways

Last Updated: Mar 27, 2024

React: Fiber Architecture

Author Sneha Mallik

Do you think IIT Guwahati certified course can help you in your career?

Yes

Introduction

React fiber is a reimplementation of React's fundamental algorithm that is still in progress. It is the pinnacle of the React team's two-year study.

React Fiber's purpose is to make it more suitable for animation, layout, and gestures. Its main feature is incremental rendering, breaking down rendering tasks into smaller portions and distributing them across numerous frames.

Other notable improvements include the ability to halt, abort, or reuse work as new updates arrive and the ability to prioritize different types of updates and new concurrency primitives.

Also See, Dropdown in React JS, Hooks in React JS

React Reconciliation

It's a React algorithm that compares two trees to see which sections need to be modified in the next update.

For example, suppose the component's props or state are updated. In that case, React will determine whether or not to perform a DOM update by comparing the newly returned element to the previously rendered one.

Only React will update the DOM if they are not equal. This is called reconciliation.

DOM(Document Object Model)

The Document Object Model, or DOM, is a tree data structure that the browser uses. It's a tree data structure that represents the user interface.

DOM

Stack Reconciler

Up until React 15, the previous reconciliation algorithm implementation referred to as ‘stack reconciler’ was used.

It's quite technical, and it needs a thorough understanding of the React public API, including how it's broken down into core, renderers, and reconcilers.

It also requires that you know how to distinguish between React components, instances, and elements.

In React 15 and prior, the stack reconciler was utilized. It can be found in the src/renderers/shared/stack/reconciler directory.

Element

In terms of the DOM nodes or other components, an element is a simple object that describes what you wish to see on the screen. Elements can have props that contain other elements. It is cheap to manufacture a React element. Once an element has been generated, it cannot be changed.

Reconciliation Vs. Rendering

React can render to a variety of targets, including the DOM and native Android and iOS views. The reconciler calculates which portions of a tree have changed, and the renderer utilizes that information to update the user interface.

The reconciler is re-implemented by Fiber, and it has nothing to do with rendering.

What is the need for the new architecture?

Because JavaScript is single-threaded, we only have one thread to handle all of our UI(user interface) updates, user actions, and network calls, among other things.

During the first reconciliation phase, we have two trees: a rendered current tree and an updated tree with all new modifications. The reconciler will synchronously detect the difference between these two trees in a single pass, preventing the main thread from performing other critical activities such as user actions.

Due to the way the stack reconciler operates, it has a few limitations. Because the technique is entirely recursive, every update is immediately applied. These updates can become more expensive as the DOM grows larger, resulting in dropped frames.

A UI change should also take precedence over a data storage update. Animations may appear sluggish or slow if this is not done. The stack reconciler does not distinguish updates.

As a result, as part of the React 16 release, the Facebook team has introduced Fiber as its core architecture.

Fiber's main purpose is to allow React to take advantage of task scheduling. React should be able to:

Work can be put on hold and returned later.
Assign different types of work different priorities.
Work that has already been completed can be reused.
If the task is no longer required, stop it.

Elements rendered into DOM

The following two components handle the rendering of an element into the DOM:

Reconciler
Renderer

The reconciler will do the computation, who will then inform React about which portions of the tree have been modified.

The renderer then uses this computation to update the rendered tree.

The reason for the separation is that ReactDOM and React Native can each use their own renderer while still using the same reconciliation technique.

What is React Fiber?

React's previous Reconciliation technique required it to generate a tree of (React) elements and traverse it repeatedly. React requires an execution stack to traverse the tree recursively.

The issue with the execution stack is that it causes the entire subtree to be re-rendered immediately, which degrades the user experience.

React considered re-implementing the reconciliation method to tackle this problem with the execution stack.

A single react fiber is a Javascript object with information on a component, its inputs, and outputs. The React Fiber architecture is a react-specific reimplementation of the stack.

The reconciliation method has been re-implemented in Fiber. It's a unique data format that represents work that must be completed.

Each element in React has a fiber node that corresponds to it. Fiber's biggest benefit is that they aren't formed on every render.

The architecture of Fiber allows you to schedule, halt, and stop the work.

Current and workInProgress trees

The current tree is the one that is currently flushed to render the UI. It's the one that was used to create the current user interface. Fiber creates a workInProgress tree using the updated data from the React elements whenever there is an update. This workInProgress tree is updated by React, and it is used for the next render. This workInProgress tree becomes the current tree once it is rendered on the UI.

A child (or null value if there is no child), sibling, and parent property exists for each fiber. These are the pointers in the Fiber that make it possible for it to function as a linked list.

React Fiber tree traversal

The React Fiber reconciler accomplishes this above workflow by dividing the job into numerous units of labor. It determines the priority of each task and allows the unit of work to be paused, reused, or aborted. Individual nodes in the fiber tree maintain track of which are required to make the above possible. Every fiber is a collection of linked lists connected by a child, sibling, and return references.

React Fiber Architecture

As we can see, the react fiber structure is made up of the following basic parts :

{

stateNode,

child,

siblings,

return,

memoizedState,

memoizedProps,

pendingProps,

updateQueue,

alternate,

type,

key

}

stateNode

Holds the reference to the fiber node's class instance of a component, DOM node, or other React element type. This feature, in general, is used to store the local state associated with a fiber.

child and sibling

All fiber nodes connect to singly linked-tree traversal algorithm field points, i.e., child and sibling. They demonstrate Fiber's recursive tree structure.

The render() method returns a value, which corresponds to the child fiber. If more than one child is returned, the others are treated as siblings.

type and key

The fiber type represents the component to which the current fiber node is connected. The component type specifies whether it is a string, a class, a function, or a DOM element.

On the other hand, the key recognizes all updated, removed, or added pieces and determines whether or not they can be reused.

return

Because the program returns to the return fiber after processing the current one, it might be termed the parent fiber.

The program will return to the parent fiber after processing the child fibers.

updateQueue

It is the queue of the state updates, callbacks, and DOM updates.

memoizedState

The condition of the fiber is utilized to create the output. It reflects the state that is currently rendered on the screen when processing updates.

memoizedProps

The props of the fiber that was utilized to generate the output in the preceding render.

pendingProps

Props that need to be applied to child components or DOM elements after being updated from new data in React elements.

Frequently Asked Questions

What do you mean by 'Fiber'?

Fiber is a virtual stack frame that represents a component instance, and these virtual stack frames are saved in memory. As a result, they can be used however or whenever you choose to meet your scheduling objectives.

The reconciliation method has been re-implemented in Fiber. Each element in React has a fiber node that corresponds to it. Fiber's biggest benefit is that they aren't formed on every render.

The architecture of Fiber allows you to schedule, halt, and stop the work.

2. What is 'React Scheduling'?

The react scheduling phase decides when the job should be completed. Work might be scheduled according to priority or according to time. The term 'work' refers to any action or process that must be completed in a program.

While rendering a React application, there is a lot of work to be done. Some of it needs to be addressed right away, while others can wait. As a result, the job is classified as either high-priority or low-priority. As a result, the high-priority task gets scheduled ahead of the low-priority task. While each update has a different priority, it is easier to distinguish between them.

Key Takeaways

In this blog, we went over the fundamentals of React fiber. The React Fiber reconciler accomplishes this by dividing the job into numerous units of a task. It determines the priority of each task and allows the unit of work to be paused, reused, or aborted. Individual nodes in the fiber tree maintain track of which are required to make the above possible. Every fiber is a collection of linked lists connected by a child, sibling, and return references.

Recommended Reading: Instruction Format in Computer Architecture

You can also consider our React Js Course to give your career an edge over others.