React (Web)Month 4 · Week 16

Day 77: Review React Fiber & New Architecture Highlights

Consolidate the two biggest architectural threads of the roadmap — React Fiber and React Native's New Architecture — into a single, confidently-explainable narrative.

Mark this day complete

Study

Concepts

The one-paragraph version of each, ready to recite

React Fiber (Day 21): Fiber replaced recursive, synchronous, uninterruptible reconciliation with an iterative linked-list-of-units-of-work model, enabling the render phase to be paused, resumed, prioritized, or discarded — this is the SINGLE architectural change that made Concurrent Features (Day 23: useTransition, useDeferredValue) possible, because none of them work without the ability to interrupt in-progress rendering work.

React Native New Architecture (Days 31-34): JSI replaced the asynchronous, JSON-serializing Bridge with direct, synchronous C++ object references, which Fabric (the renderer) and TurboModules (native modules) both build on top of — the practical payoff is lower latency for native interactions, lazy module loading (faster cold start), and synchronous native calls where useful. Codegen ties it together by generating typed native glue from one JS/TS spec, keeping both platforms' implementations honest against a single contract.

The connective thread worth stating explicitly in an interview

Both stories follow the same shape: identify a structural bottleneck (synchronous, uninterruptible work in one case; serialized, async-only cross-boundary calls in the other), replace the underlying data structure/protocol (fiber linked list; JSI direct references), and only THEN build higher-level features on top that were previously impossible (concurrent rendering; Fabric/TurboModules/synchronous calls) — recognizing and articulating this "foundational change enables downstream capabilities" pattern is itself a strong signal of architectural thinking, transferable to how you'd reason about any unfamiliar system.

See It

Visualizations

Visualization

Fiber vs JSI — same shape, different problem

	React Fiber	JSI (New Architecture)
Bottleneck it replaced	Synchronous, uninterruptible recursive reconciliation	Async-only, JSON-serialized Bridge messaging
Core structural change	Tree → linked list of interruptible units of work	Message-passing → direct C++ object references
What it unlocked	useTransition, useDeferredValue, Suspense scheduling	Fabric, TurboModules, synchronous native calls
Landed in	React 16 (Fiber), React 18 (Concurrent Features)	React Native 0.68+ opt-in, default in later versions

Build It

Code Examples

Two "explain it in 60 seconds" prompts — say these out loud

text

Prompt A: "Explain React Fiber and why it matters, in 60 seconds."
  - What problem existed before Fiber (uninterruptible sync reconciliation)
  - What Fiber actually is (linked list of units of work, not a new
    virtual DOM format)
  - What it enabled downstream (name at least one Concurrent Feature)

Prompt B: "Explain React Native's New Architecture and why it matters,
in 60 seconds."
  - What problem existed before (the async, serializing Bridge)
  - What JSI actually is (direct synchronous C++ references)
  - What it enabled downstream (Fabric, TurboModules — name the
    concrete payoff: latency, cold start, sync calls)

-> Time yourself. If either explanation runs past 90 seconds or
   drifts into unrelated detail, tighten it and try again.

Remember

Key Takeaways

Both Fiber and the New Architecture follow the same shape: fix a structural bottleneck first, then build previously-impossible features on top.
Fiber unlocked interruptible, prioritized rendering — the prerequisite for every Concurrent Feature.
JSI unlocked synchronous, non-serialized native calls — the prerequisite for Fabric and TurboModules.
Being able to explain each in a tight 60 seconds, with the right emphasis, is a distinct skill from understanding the mechanics — practice the explanation itself.
Naming the "foundational change enables downstream capability" pattern explicitly signals architectural thinking beyond rote recall.

Do It

Practice

1Deliver both 60-second explanations out loud, timed, without notes, and record yourself to check pacing and clarity.
2Write a single sentence connecting Fiber's "interruptible work" idea to JSI's "synchronous calls" idea — what is the deeper shared theme?
3Pick one Concurrent Feature and one Fabric/TurboModules capability, and explain specifically why EACH would be impossible without its respective foundational change.