Skip to main content
This project is part of Week 7 and implements React’s modern concurrent rendering architecture.

​
Overview

Build a clone of React’s core reconciler implementing the Fiber architecture with full hooks support. This project covers React’s modern concurrent rendering model including time slicing, Suspense, and priority-based updates.

​
Project requirements

Architecture

Fiber reconciler with work loop

Hooks

Complete hooks implementation

Concurrent

Time slicing and Suspense

Priority

Lane-based priority model

​
Core components

1

Fiber reconciler

Implement the Fiber architecture:
  • Work loop and unit of work
  • Reconciliation phases: render and commit
  • Effect list construction
  • Priority levels and lane model
The Fiber architecture enables interruptible rendering and concurrent features.
2

Hooks implementation

Build all core hooks:
  • Hooks queue and cursor
  • useEffect cleanup and dependency checking
  • useRef mutable container
  • useCallback/useMemo memoization
  • Custom hook composition
Hooks must maintain state correctly across renders and handle all edge cases.
3

Concurrent features

Implement concurrent rendering:
  • Time slicing and work interruption
  • Suspense and lazy loading
  • useTransition and useDeferredValue
  • Automatic batching
These features enable smooth UIs even during heavy computation.

​
Fiber architecture

Fiber is React’s reconciliation algorithm that enables incremental rendering and prioritization.

​
Work loop

The work loop processes units of work (Fibers) and can be interrupted: 
function workLoop(deadline) {
  while (nextUnitOfWork && deadline.timeRemaining() > 0) {
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
  }
  
  if (nextUnitOfWork) {
    requestIdleCallback(workLoop);
  } else {
    commitRoot();
  }
}

​
Reconciliation phases

Render phase

Build Fiber tree, can be interrupted and restarted. No side effects.

Commit phase

Apply changes to DOM synchronously. Cannot be interrupted.

​
Hooks implementation

Implement state management with queue-based updates. Handle multiple state updates in a single render and batching.
Track effects during render, execute after commit. Implement cleanup functions and dependency array comparison for optimization.
Create mutable container that persists across renders without triggering re-renders.
Implement memoization with dependency tracking. Only recompute when dependencies change.
Enable composition of primitive hooks into reusable custom hooks.

​
Hooks queue architecture

Hooks rely on a cursor and queue system to maintain state across renders.
Key implementation details:
  • Hooks must be called in the same order every render
  • Each hook stores its state in a linked list
  • Cursor tracks current position in the hooks list
  • Hook state persists on the Fiber node

​
Concurrent features

1

Time slicing

Break rendering work into chunks that can be interrupted. Yield to browser between chunks to keep UI responsive.
2

Suspense

Allow components to “suspend” rendering while waiting for async data. Display fallback UI during loading.
3

useTransition

Mark updates as transitions to deprioritize them. Keep UI responsive during heavy updates.
4

useDeferredValue

Keep a deferred version of a value. Allows showing stale content while new content loads.

​
Priority model

Lanes

React uses “lanes” for fine-grained priority control.

High priority

User input and animations (synchronous).

Normal priority

Standard updates like data fetches.

Low priority

Background updates and transitions.

​
Effect list construction

Build a linked list of Fibers with effects during reconciliation for efficient commit phase.
During the render phase, tag Fibers that have side effects:
  • Placement (new nodes)
  • Update (changed nodes)
  • Deletion (removed nodes)
In the commit phase, traverse the effect list and apply all changes synchronously.

​
Deliverables

  • Working React clone with Fiber reconciler
  • Complete hooks implementation (useState, useEffect, useRef, useCallback, useMemo)
  • Time slicing with work interruption
  • Suspense for async rendering
  • useTransition and useDeferredValue
  • Lane-based priority system
  • Effect list and commit phase
  • Automatic batching of updates
  • Test suite demonstrating all features
  • Examples showing concurrent rendering benefits

​
Success criteria

  • Fiber work loop can be interrupted and resumed
  • All hooks work correctly with proper state management
  • Hooks maintain call order invariants
  • useEffect cleanup runs at correct times
  • Dependency arrays properly detect changes
  • Suspense displays fallbacks during loading
  • Time slicing keeps UI responsive during heavy renders
  • Priority system correctly prioritizes high-priority updates
  • Commit phase applies all effects synchronously
  • Component tree renders correctly with concurrent features

Build docs developers (and LLMs) love

Get started for freeTalk to us