What are the three pillars of the New Architecture?
new architecture vocabulary.
JSI for direct JS-native calls, Fabric as the new renderer, and TurboModules for lazy native modules, all unified by CodeGen for type-safe bindings.
What's really being asked
A correct high-level map of the new architecture's components and how they relate, without conflating them.
The full answer
The new architecture rests on three pillars. JSI, the JavaScript Interface, is the foundation: a lightweight C++ layer that lets JavaScript hold references to native objects and call them directly and synchronously without JSON serialization, replacing the legacy bridge. Fabric is the new renderer, responsible for building and committing the UI; it constructs the shadow tree in C++, enables concurrent React features, and allows synchronous layout reads. TurboModules are the new model for native modules: they are accessed through JSI and load lazily on first use, improving startup time. A strong answer also mentions CodeGen, the tooling that generates type-safe interfaces between JS specs and native code, gluing the pillars together.
The mistakes people make
Swapping the roles of Fabric and TurboModules; Fabric is rendering, TurboModules are native modules. Listing the bridge as a pillar. Calling JSI an optimized bridge instead of its replacement. Omitting JSI entirely as the underlying layer.
What usually comes next
What CodeGen produces, how to enable the new architecture, how Fabric supports concurrent rendering, and what changes for library authors migrating native modules.
A concrete example
An app enabling the new architecture sees its custom view rendered by Fabric, its battery and storage native modules become lazily loaded TurboModules called through JSI, and CodeGen produces the C++ and JS type-safe glue so a mismatched prop type fails at build time rather than crashing at runtime.
Interview question
Which mapping of new-architecture pillars to function is correct?
- a.JSI is the direct JS-native layer; Fabric renders; TurboModules are lazy native modulesCorrect
- b.Fabric handles native modules; TurboModules renders the UI
- c.JSI renders the UI while Fabric serializes data
- d.The bridge, Flipper, and Hermes are the three pillars
Why? this is the answer
JSI underpins direct calls, Fabric is the renderer, and TurboModules are lazy native modules. The first option swaps Fabric and TurboModules' roles.
Just read this? Test yourself on what you have been reading.
Read the original → github.com
- #react-native
- #new-architecture
- #jsi
- #fabric
- #turbomodules
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react-native — each one lists the topics its interview covers.
See open roles