Solution

1. What is Fiber?

Fiber is a reimplementation of the React reconciliation algorithm. Conceptually, a Fiber is a unit of work. Technically, it is a JavaScript object that contains information about a component, its input, and its output.

2. Render vs. Commit

• Render Phase (Async): React traverses the tree, creates Fiber nodes, and calculates changes. This phase can be paused, aborted, or restarted. No DOM changes happen here.
• Commit Phase (Sync): Once the work is done, React applies the changes to the DOM. This phase is synchronous and cannot be interrupted to ensure the UI is consistent.

3. Time Slicing

React breaks the rendering work into small chunks (fibers). It uses the requestIdleCallback (or an internal polyfill/scheduler) to perform work only when the main thread is free. If a high-priority event (like user input) occurs, React pauses the rendering work to handle the event, then resumes.