DEV Community

Yogesh Bamanier
Yogesh Bamanier

Posted on

React Scheduler & Fiber Architecture Explained 🚀

#react #webdev #programming #javascript

Time Slicing, Concurrent Rendering & WIP Management

React’s scheduler is like a super-efficient project manager for your UI updates. It decides what work to do, when, and in which order, ensuring smooth and responsive applications. This post explains React’s scheduler, Fiber, and reconciliation in an intuitive, story-like flow.

React also introduces modern features like:

  • ⏳ Time Slicing: Splitting work into chunks to keep UI responsive.
  • ⚡ Concurrent Rendering: Rendering multiple parts of the UI in parallel, without blocking the main thread.
  • 🧩 Incremental Rendering: Gradually updating the UI in pieces, allowing urgent updates to take priority.

The scheduler is the engine that makes these possible by managing work priorities, yielding, and resuming tasks intelligently.

🔹 1. Triggering an Update

Story: You typed in an input box or clicked a button.

  • React receives a state update (setState or dispatch).
  • A Fiber object is created for each component that might change. Think of Fibers as small work units.

  • Each Fiber contains:

    • Component type
    • Props & state
    • Child & sibling relationships
    • Update queues

🔹 2. Scheduling: Prioritizing Work ⏱️

  • High-priority work: user input, animations
  • Low-priority work: network responses, background tasks
  • React may pause low-priority work to handle urgent updates first.
  • Uses browser APIs like requestIdleCallback to yield control and avoid freezing the UI.
  • ⏳ Time Slicing: breaks large updates into smaller chunks, allowing React to yield between them.
  • ⚡ Concurrent Rendering: allows multiple updates to be processed without blocking rendering.
  • 🧩 Incremental Rendering: ensures that only necessary updates are committed while other updates wait their turn.

🔹 3. Fiber Tree: The Blueprint 🌳

  • Each component = Fiber node
  • Each Fiber has pointers: child, sibling, return (parent)
  • State (memoizedState), pending props, update queue
  • Scheduler walks this tree deciding which Fiber to update first

🔹 4. Work Loop: Scheduler in Action 🔄

  1. Pick a Fiber from the update queue
  2. Perform render work:
  • Compute virtual DOM
  • Reconcile children (compare old vs new)
    1. If running out of time, pause work and save remaining tasks (yielding)

> React ensures the main thread stays free and UI remains responsive.

🔹 5. Reconciliation: Diffing Fibers 🔍

  • Compare old and new Fiber tree
  • Fiber unchanged → skip update
  • Fiber updated → mark for commit
  • Fiber new → mark for placement
  • Fiber removed → mark for deletion

> Only changed Fibers update the DOM, minimizing expensive operations.

🔹 6. Commit Phase: Applying Changes ✅

Commit phase is synchronous and happens in sub-phases:

  1. Before Mutation Phase:
  • getSnapshotBeforeUpdate runs for class components

  • Allows reading layout info before DOM changes

    1. Mutation Phase:

  • Update the DOM nodes

  • Apply changes calculated in render phase

    1. Layout Effects Phase:

  • useLayoutEffect hooks run after DOM updates but before the browser paints

  • Useful for reading layout and making visual adjustments synchronously

    1. Passive Effects Phase:

  • useEffect hooks run after paint asynchronously

> Think of this as React sending instructions to the construction team in ordered steps.

🔹 7. Pausing, Resuming, and Managing WIP ⏸️▶️

React can pause, resume, discard, or recreate work-in-progress (WIP) Fibers depending on priority and runtime conditions:

  • Pausing: Main thread busy or higher-priority updates arrive → current WIP paused and stored in workInProgress tree.
  • Resuming: During next idle period, scheduler resumes paused work.
  • Discarding: Obsolete WIP is discarded to save computation.
  • Recreating: Significant change in props/state may trigger recreation of Fiber work.
  • Multi-WIP management: Single Fiber may have multiple WIPs for different lanes; scheduler executes highest-priority WIP first.

> ⏳⚡🧩 Time slicing, concurrent rendering, and incremental rendering are achieved through this WIP management system.

🔹 8. Priority Lanes 🏎️

  • Sync lane: urgent updates (typing, clicks)
  • InputContinuous lane: scrolls, pointer movements
  • Default lane: normal updates
  • Idle lane: background tasks

Scheduler executes updates based on lane priority, deciding which WIP to process or pause.

🔹 9. Hooks & Scheduler Interaction 🪝

  • useState/useReducer updates go into Fiber’s updateQueue
  • Scheduler decides when to process queue
  • useLayoutEffect runs in layout phase before paint
  • useEffect runs in passive phase after paint
  • getSnapshotBeforeUpdate provides snapshot of DOM before mutation for class components

🔑 Key Takeaways

  1. React splits work into Fibers for granular updates
  2. Scheduler prioritizes and yields work for smooth UI
  3. Render phase is interruptible, commit phase is synchronous
  4. Only changed Fibers are committed to the DOM
  5. Scheduler can pause, resume, discard, or recreate WIP Fibers
  6. Hooks integrate seamlessly into this system
  7. useLayoutEffect and getSnapshotBeforeUpdate allow precise control over layout before paint
  8. ⏳⚡🧩 Time slicing, concurrent rendering, and incremental rendering keep apps responsive even with complex updates

🌟 Story Flow Summary

  1. User triggers update → Fibers created
  2. Scheduler decides priority → Render phase computes virtual DOM
  3. Reconciliation detects changes → Commit phase applies updates with layout/passive hooks
  4. WIP Fibers may pause, resume, or be discarded → UI stays responsive

React is a smart manager, multitasking efficiently to keep your app smooth.

🖼️ Visual Diagram (Conceptual) 

User Interaction --> Scheduler (priority lanes, ⏳Time Slicing, ⚡Concurrent Rendering, 🧩Incremental Rendering)
           --> Fiber Tree (render phase)
           --> WIP Management (pause/resume/discard)
           --> Reconciliation (diffing old vs new)
           --> Commit Phase
               |-- Before Mutation: getSnapshotBeforeUpdate
               |-- Mutation: DOM updates
               |-- Layout Effects: useLayoutEffect
               |-- Passive Effects: useEffect (after paint)
Enter fullscreen mode Exit fullscreen mode

✍️ Written by Yogesh Bamanier
🔗 LinkedIn

#ReactJS #Frontend #WebDevelopment #FiberArchitecture #Scheduler #WIP #Hooks #JavaScript #WebDev #UIDevelopment #Performance #useLayoutEffect #getSnapshotBeforeUpdate #TimeSlicing #ConcurrentRendering #IncrementalRendering

Top comments (0)