Introduction

React Fiber is the invisible hero of React’s rendering engine. Introduced in React 16, it revolutionized how React handles rendering tasks, enabling smoother user interactions and better performance for complex applications. Whether you’re building a simple app or a feature-rich platform, understanding Fiber can help you deliver a better user experience.

In this post, we’ll break down what React Fiber is, why it was introduced, how it works, and showcase real-world examples to demonstrate its power.

Why Fiber Was Introduced

Before React 16, React used a stack-based algorithm for rendering, which was synchronous. This meant:

All updates were processed in a single block: If an update required significant rendering work (e.g., large lists or complex UI), React would lock the browser’s main thread until the update was complete.

Performance issues in large apps: The synchronous model could cause the UI to freeze or become unresponsive during heavy computations.

React Fiber was introduced to address these challenges. It breaks rendering into smaller units of work and uses asynchronous rendering to improve performance. With Fiber, React can:

Pause work on one part of the UI and focus on more critical tasks.
Prioritize updates based on importance (e.g., animations vs. background data fetching).
Resume work later without starting over.

How React Fiber Works

React Fiber represents your application’s component tree as a tree of Fiber nodes. Each Fiber node contains all the information React needs to render and update that part of the tree.

What a Fiber Node Tracks

Component Type: The type of component (functional, class, or host like div).
Props and State: The current input data for the component.
Pointers for Navigation: Links to parent, child, and sibling nodes.
Effect List: Tracks side effects like DOM mutations or lifecycle events.

Fiber Node Simplified

Here’s an example of what a single Fiber node might look like:

{
type: ‘div’, // Component type (e.g., a <div> element)
key: null, // Key for list reconciliation
pendingProps: { id: ‘1’ }, // Props being passed
memoizedProps: { id: ‘1’ },// Last known props
memoizedState: null, // Component state
child: FiberChildNode, // Pointer to the first child Fiber node
sibling: FiberSiblingNode, // Pointer to the next sibling Fiber node
return: parentFiberNode, // Pointer to the parent Fiber node
effectTag: ‘PLACEMENT’, // Indicates the type of update needed
}

Expanded Example: Fiber Node for a Nested Component Tree

Consider the following component tree:

The corresponding Fiber nodes might look like this:

/ Root Fiber node for <App>
{
  type: App,
  key: null,
  pendingProps: {},
  memoizedProps: {},
  memoizedState: null,
  child: {
    // Fiber node for <Header>
    type: Header,
    child: null,
    sibling: {
      // Fiber node for <Content>
      type: Content,
      child: {
        // Fiber node for <Sidebar>
        type: Sidebar,
        sibling: {
          // Fiber node for <Main>
          type: Main,
          child: null,
          sibling: null,
        },
        child: null,
      },
      sibling: null,
    },
    child: null,
  },
  sibling: null,
}

This structure allows React to traverse the tree efficiently, updating only the parts of the UI that need changes.

Real-World Examples of React Fiber

Example 1: Social Media App

Imagine a social media app where users:

Scroll through a large list of posts.
Type a comment in a text box.
React to a post with a like or emoji.

Without Fiber:

Rendering the large list blocks the browser’s main thread.
Typing in the comment box lags.

With Fiber:

React prioritizes typing (high-priority).
Rendering the posts (low-priority) is paused and resumed later.
The UI remains smooth.

Code Example

function SocialMediaApp() {
  const [comments, setComments] = useState("");
  const [posts] = useState(
    Array(1000)
      .fill(0)
      .map((_, i) => `Post ${i + 1}`)
  );

  const handleCommentChange = (e) => setComments(e.target.value);

  return (
    <div>
      <textarea
        value={comments}
        onChange={handleCommentChange}
        placeholder="Type a comment..."
      />
      <div>
        {posts.map((post, index) => (
          <div key={index}>{post}</div>
        ))}
      </div>
    </div>
  );
}

Example 2: Animation with Data Fetching

In an e-commerce app, imagine animating a dropdown while fetching product data. Fiber ensures:

The dropdown animation (high-priority) remains smooth.
The data fetching (low-priority) happens in the background.

Key Benefits of React Fiber

Responsive UIs: Fiber keeps the UI responsive even during heavy updates.
Task Prioritization: Urgent tasks like animations or typing are handled first.
Scalability: Fiber can handle complex component trees and large datasets.

Conclusion

React Fiber revolutionized rendering by making it asynchronous and priority-driven. By breaking tasks into smaller chunks and allowing interruptions, Fiber ensures smooth, responsive apps. Whether it’s managing animations, large datasets, or user interactions, Fiber empowers React to deliver a stellar user experience.

Mastering Fiber’s concepts can help you build apps that are not only functional but also performant.

React Fiber — The Engine Behind Smooth and Efficient UIs