Skip to content
khua
← All writing

Article · June 24, 2026

React Native's New Architecture, Explained Without the Diagrams

Fabric, TurboModules, JSI, Codegen. Four names for one idea, and what it actually changes for an app you are shipping this quarter.By Khua · 2 min read

The New Architecture has been explained mostly in architecture diagrams, which is a shame, because the idea underneath it is simple and the consequences are practical.

The old problem, in one sentence

JavaScript and native code could not call each other directly, so every interaction was serialised to JSON and posted across an asynchronous bridge.

That is the whole story. Everything people disliked about old React Native performance — laggy gestures, list scroll that fell behind the finger, animations that stuttered when data arrived — traces back to that sentence.

What the four names mean

  • JSI removes the serialisation. JavaScript holds a reference to a C++ object and calls it directly. This is the actual change; the rest is built on it.
  • TurboModules are native modules over JSI, loaded lazily instead of all at startup.
  • Fabric is the renderer over JSI, which can now do layout synchronously when it needs to.
  • Codegen generates the type-safe glue between the two worlds from your TypeScript definitions, so a mismatch is a build error rather than a crash.

What it changes for your app

Startup is faster, because TurboModules load on demand rather than initialising every native module before the first frame.

Gestures and scroll feel attached to the finger, because the renderer can respond synchronously rather than waiting for a round trip.

Some old libraries break. This is the real cost. A library that reaches into the old bridge internals needs updating, and unmaintained ones will not get it. Check your dependency list before you plan the upgrade, not during.

Should you migrate an existing app

If it works and you have no performance complaints: not urgently, but do not let it rot either — the ecosystem is moving and eventually the libraries you want will assume it.

If you are starting something new: you are already on it, and you do not need to think about any of this.

If you have a specific problem this fixes — scroll that lags, a gesture that feels detached, slow cold start — it is worth the migration on its own merits.

The honest caveat

Migrating is not free. Budget for at least one library that needs replacing and one native module that needs rewriting. I have not yet done a migration where the dependency audit turned up nothing.


Planning an upgrade and want to know what it will cost you in practice rather than in theory? Ask.