React Fiber

React Fiber is the internal engine and reconciliation algorithm introduced in React 16 (released in 2017). It was a complete rewrite of React’s core algorithm, designed to improve perceived performance for complex applications.

The Problem Fiber Solved

Before React 16, React used a recursive “stack” algorithm for reconciliation. When an update was triggered (like a state change), React would traverse the component tree and calculate the differences synchronously in a single, uninterrupted pass.

Because JavaScript is single-threaded, if a render took a long time (e.g., rendering a huge table), React would block the main thread. This meant the browser couldn’t process user input, animations would stutter, and the app would feel frozen until React finished its render.

What is a “Fiber”?

A “Fiber” is a JavaScript object that represents a unit of work. React creates a Fiber node for every React element, forming a linked-list tree structure (the Fiber tree).

By breaking rendering work into smaller units (fibers), React gained the ability to pause, abort, or reuse work as needed.

Key Features of React Fiber

1. Incremental Rendering (Time Slicing)

Fiber allows React to split the rendering work into chunks and spread it out over multiple frames. React can start rendering a component tree, realize it has run out of time for the current frame, yield control back to the browser (so it can paint animations or handle user clicks), and then resume rendering exactly where it left off in the next frame.

2. Prioritization

Fiber allows React to assign priorities to different types of updates.

An animation or a user typing in an input field is high priority and needs to be handled immediately.
A network response updating a data table in the background is low priority and can be delayed if the main thread is busy.

3. Concurrency (React 18+)

While Fiber was introduced in React 16, its true power was fully unlocked in React 18 with Concurrent Features (like useTransition and useDeferredValue). Because Fiber can pause and discard rendering work without blocking the main thread, React can render multiple versions of the UI in the background concurrently.

Summary

You do not need to interact with React Fiber directly when writing React applications. However, understanding that Fiber is a pausing/resuming engine based on a linked list of “units of work” helps explain how React achieves smooth performance and why Concurrent React is possible.

Interview Questions

Q: What is React Fiber?
A: Fiber is the internal reconciliation engine introduced in React 16. It completely rewrote how React processes updates. Instead of recursively processing the entire component tree synchronously (which blocked the main thread), Fiber breaks rendering work into small chunks (“fibers”) that can be paused, aborted, or prioritized, enabling Concurrent Mode.