What is React Fiber?

React Fiber is the new reconciliation engine in React, introduced in React 16. It’s a complete rewrite of React’s core algorithm(old stack-based algorithm) for rendering and updating the UI. Fiber enhances React’s ability to handle asynchronous rendering, prioritized updates(assign priority to different types of updates), and interruption(ability to pause, abort, or reuse work) of rendering work, enabling smoother and more responsive user interfaces.

Practical Code Example

// React Fiber: Re-implementation of React reconciliation algorithm
// Breaks rendering work into small incremental units (fibers) that can be paused, aborted, or reprioritized:
const fiberNode = {
  type: 'div',
  key: null,
  stateNode: null,       // DOM element instance
  child: null,           // First child fiber
  sibling: null,         // Next sibling fiber
  return: null           // Parent fiber
};