React: What is React Fiber?

React Fiber is a new reconciliation system that appeared in React 16. It makes React smoother and more responsive.

Simple analogy: Imagine you are assembling a puzzle.

• Old system (stack) — you assemble the puzzle strictly in order: first the top-left corner, then the next piece, and so on to the end. If interrupted — you have to start over.
• Fiber — you assemble the puzzle, but you can pause at any moment, check on the second kettle on the stove (handle a more important update), and then continue from the same place.

What Fiber provides:

1. Incremental Rendering — React can break work into small pieces and distribute them over time without blocking the interface.
2. Update prioritization — text input (urgent) is more important than animation (can wait).
3. Interruption and resumption — if a more important update comes, React can pause current work and handle it.
4. Concurrent Features (React 18+) — useTransition, useDeferredValue, Suspense.

How Fiber works under the hood:

• Each component becomes a Fiber node — a JavaScript object containing type, props, state, and links to parent/sibling/child.
• React maintains a work loop that processes fibers one at a time. When a frame deadline approaches (16ms for 60fps), React yields control back to the browser.
• Two phases: render phase (can be interrupted, builds Virtual DOM) and commit phase (synchronous, applies changes to DOM).

Fiber tree structure:

What this means for the developer: You don't need to do anything — Fiber works "under the hood". But thanks to Fiber, we got:

• Suspense — show "loading" while data is loading.
• useTransition — mark an update as "not urgent".
• Automatic processing — React itself decides which updates are more important.

Common pitfalls with Fiber:

• In React 18+ with Strict Mode, effects may run twice in development (double invocation). This is intentional to help find missing cleanup functions.
• Interrupted renders mean your render function may be called multiple times. Always keep it pure — no side effects in the render phase.

Monitoring: Use React DevTools Profiler to see render timings. The "Why did this render?" feature helps identify unnecessary re-renders that Fiber optimizes.