Skip to main content

React Fiber

Fiber = React's new reconciliation engine

What is React Fiber?​

"New reconciliation algorithm"

React Fiber is the new reconciliation engine introduced in React 16 that enables incremental rendering.

"React Fiber is the new reconciliation algorithm that enables incremental rendering, allowing React to split work into chunks and prioritize updates."

Key Features​

Incremental · Interruptible · Prioritizable

  • Incremental rendering: Split work into chunks
  • Interruptible: Can pause and resume work
  • Prioritizable: High-priority updates first
  • Better performance: Non-blocking updates

"Fiber enables incremental, interruptible rendering with priority-based updates for better performance."

Why Fiber?​

Old stack = blocking, Fiber = non-blocking

Old reconciliation:

  • Stack-based, synchronous
  • Blocking - couldn't interrupt
  • All updates processed together

Fiber:

  • Fiber-based, asynchronous
  • Can interrupt and resume
  • Prioritizes important updates

"Fiber replaced the old stack-based reconciliation with a fiber-based system that can interrupt and prioritize work."

Fiber Node​

Unit of work in Fiber

Each component/element becomes a Fiber node with:

  • Type (component, element, etc.)
  • Props
  • State
  • Child/sibling/parent links
  • Work to do (update, mount, etc.)

"Fiber nodes represent components/elements and contain information about their relationships and work to be done."

Work Phases​

Render phase + Commit phase

  1. Render phase: Build work list (can be interrupted)

    • Can be paused, aborted, or restarted
    • No side effects

  2. Commit phase: Apply changes (synchronous)

    • Runs to completion
    • Can have side effects

"Fiber has two phases: render (interruptible, builds work list) and commit (synchronous, applies changes)."

Priority System​

High priority updates first

Priority levels:

  • Synchronous: Immediate (like user input)
  • Task: Default priority
  • Animation: Smooth animations
  • Low: Background work
  • Offscreen: Hidden content

"Fiber prioritizes updates - user interactions get high priority, background work gets low priority."

Time Slicing​

Split work across frames

Fiber can:

  • Split work into small chunks
  • Yield to browser between chunks
  • Keep UI responsive
  • Resume work later

"Time slicing allows Fiber to split work into chunks, keeping the UI responsive by yielding to the browser."

Concurrent Features​

Suspense · Transitions · useDeferredValue

Fiber enables:

  • Suspense: Handle loading states
  • Transitions: Mark non-urgent updates
  • useDeferredValue: Defer non-critical updates

"Fiber enables concurrent features like Suspense, transitions, and useDeferredValue for better user experience."

9️⃣ Benefits​

Performance · UX · Features

  • Better performance with large component trees
  • Smoother animations
  • More responsive UI
  • Enables concurrent features
  • Better error boundaries

"Fiber provides better performance, smoother UX, and enables concurrent features like Suspense and transitions."

Backward Compatibility​

Same API, better engine

  • Same React API
  • Existing code works
  • Internal implementation changed
  • Better performance automatically

"Fiber maintains backward compatibility - same React API, but with a better internal engine."

"React Fiber is the new reconciliation engine that enables incremental, interruptible rendering. It splits work into chunks, can pause and resume, and prioritizes updates. Fiber has render (interruptible) and commit (synchronous) phases. It enables concurrent features like Suspense and provides better performance while maintaining API compatibility."

🧠 Ultra-Short Cheat Sheet​

New reconciliation engine
Incremental rendering
Interruptible work
Priority-based updates
Render phase + Commit phase
Time slicing
Concurrent features
Backward compatible