React Fiber: Making UI Rendering Interruptible
React Fiber treats rendering like a cooperative scheduler. It breaks UI updates into small, pausable chunks, preventing long, blocking tasks. This lets high-priority work like user input interrupt heavy rendering, keeping animations and gestures smooth.
Why it exists
The original React reconciler processed the entire component tree synchronously in a single, unstoppable pass. For large apps, this could block the main thread for long periods, causing dropped frames and a janky user experience during animations or complex state updates. Fiber was created to solve this by making rendering interruptible.
The mental model
Think of the old reconciler as a function that, once called, runs to completion. React Fiber, in contrast, is like a process with checkpoints. It works on a small piece of the UI, then can pause to see if any higher-priority work has come in, like a user click. If so, it handles the urgent task first and then resumes rendering where it left off. This prevents a single large update from freezing the app.
How it works
Fiber replaces the old recursive tree traversal with a linked list traversal of "fiber" nodes. Each fiber is a JavaScript object representing a unit of work, containing information about a component, its input, and its output. The algorithm walks the tree, creating and updating these fibers. Because it's a linked list, React can pause work at any fiber and resume later. This ability to split work into chunks and spread it across multiple frames is called incremental rendering. A scheduler uses this capability to prioritize different types of updates.
When to use it
You don't choose to use Fiber; it has been the default reconciliation engine in React since version 16. Its benefits are most apparent in applications with complex UIs, animations, gestures, and frequent data fetching. It is the foundation for modern React features like Suspense and Concurrent Mode, which rely on its ability to pause and prioritize rendering.
When not to use it
Since it's the default engine, you're always using it. The key is not to misunderstand its purpose. Do not rely on Fiber to fix fundamentally slow application logic or inefficient data structures. It manages rendering responsiveness, not your business logic's performance. For very simple, static sites, the benefits of its complex scheduling are less pronounced, but it still works efficiently behind the scenes.
One canonical example
A user is typing into a search box while a large list of data is being rendered below. Without Fiber, each keystroke might feel laggy because React is busy rendering the entire list synchronously. With Fiber, React can render a small part of the list, pause, process the user's keystroke immediately, and then resume rendering the list. The user experiences a fluid, responsive input field, even while the app is doing heavy work.
Interview question
What is the core mechanism React Fiber employs to ensure UI responsiveness during heavy rendering tasks?
- a.It executes all rendering updates in a single, highly optimized, non-blocking batch.
- b.It divides rendering work into small, interruptible units, allowing higher-priority tasks to interleave.Correct
- c.It automatically applies memoization to all component props and state to reduce unnecessary re-renders.
- d.It delegates computationally intensive rendering to a separate background thread or web worker.
Why? this is the answer
React Fiber's primary innovation is its ability to break rendering into small, pausable chunks (fibers). This allows the scheduler to pause ongoing rendering to handle urgent tasks, like user input, ensuring a smooth user experience. Other options describe different performance strategies or the old synchronous rendering model.
Just read this? Test yourself on what you have been reading.
Read the original → github.com
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles