---
id: wiki-2026-0508-new-architecture
title: New Architecture (React Native Fabric/TurboModules)
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Fabric, TurboModules, RN New Arch, React Native New Architecture]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [react-native, mobile, architecture, jsi, fabric]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: typescript
  framework: react-native-0.77
---

# New Architecture (React Native)

## 매 한 줄
> **"매 RN의 async-bridge JSON 통신을 JSI 기반 동기 C++ binding으로 교체한 ground-up rewrite."**. 2018 발표, 2024 RN 0.76부터 default, 2026 현재 RN 0.77+에서 legacy bridge는 deprecated. Fabric (renderer) + TurboModules (native modules) + Codegen (typed interface) 의 3개 pillar.

## 매 핵심

### 매 4 pillar
- **JSI (JavaScript Interface)**: C++ API로 JS engine (Hermes/JSC/V8)과 native가 직접 binding — 매 JSON serialization 제거.
- **Fabric**: 매 new renderer — shadow tree를 C++로, concurrent rendering, synchronous layout.
- **TurboModules**: 매 lazy-load native modules — JSI 통한 direct invocation, no bridge.
- **Codegen**: 매 spec.ts → native interface (Java/ObjC/C++) 자동 생성.

### 매 legacy bridge 문제점
- 모든 native call이 JSON serialize → async queue → deserialize.
- Synchronous UI update 불가 (text input lag).
- Type safety 없음 — runtime error.
- 모든 native module이 startup에 load — slow cold start.

### 매 응용
1. Meta Threads — Fabric으로 60fps scroll.
2. Shopify Mobile — TurboModules로 startup 30% 단축.
3. Microsoft Teams Mobile — Codegen으로 C++ shared core ↔ RN bridge.

## 💻 패턴

### TurboModule spec (TypeScript)
```typescript
// NativeCalculator.ts
import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  add(a: number, b: number): number;
  multiply(a: number, b: number): Promise<number>;
  readonly getConstants: () => { PI: number };
}

export default TurboModuleRegistry.getEnforcing<Spec>('Calculator');
```

### Codegen-generated Android (Kotlin)
```kotlin
// Auto-generated from spec
abstract class NativeCalculatorSpec(ctx: ReactApplicationContext)
    : ReactContextBaseJavaModule(ctx), TurboModule {
  @ReactMethod(isBlockingSynchronousMethod = true)
  abstract fun add(a: Double, b: Double): Double
}

// User implementation
class CalculatorModule(ctx: ReactApplicationContext)
    : NativeCalculatorSpec(ctx) {
  override fun getName() = "Calculator"
  override fun add(a: Double, b: Double) = a + b
}
```

### Fabric custom component (iOS)
```cpp
// MyViewComponentDescriptor.h
#include <react/renderer/components/view/ConcreteViewShadowNode.h>

namespace facebook::react {
class MyViewShadowNode final
    : public ConcreteViewShadowNode<MyViewComponentName,
                                     MyViewProps,
                                     MyViewEventEmitter> {
public:
  using ConcreteViewShadowNode::ConcreteViewShadowNode;
};
using MyViewComponentDescriptor = ConcreteComponentDescriptor<MyViewShadowNode>;
}
```

### JSI direct binding (synchronous)
```cpp
// Install host function on JS runtime
runtime.global().setProperty(
  runtime, "nativeCompute",
  jsi::Function::createFromHostFunction(
    runtime, jsi::PropNameID::forAscii(runtime, "nativeCompute"), 1,
    [](jsi::Runtime& rt, const jsi::Value&, const jsi::Value* args, size_t) {
      double x = args[0].asNumber();
      return jsi::Value(heavyCompute(x));  // sync, no bridge
    }));
```

### Enable New Arch (RN 0.77)
```bash
# iOS
RCT_NEW_ARCH_ENABLED=1 bundle exec pod install
# Android (gradle.properties)
newArchEnabled=true
hermesEnabled=true
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| New RN project (2026) | New Arch + Hermes default |
| Legacy app w/ many native modules | gradual interop migration |
| Heavy synchronous native call | TurboModule (JSI) |
| Custom view (canvas, video) | Fabric component |
| Sharing C++ core (cross-platform) | JSI host objects |

**기본값**: New Arch enabled — 매 2026 default, legacy bridge는 deprecated.

## 🔗 Graph
- 부모: [[Concurrent_Rendering]]
- 응용: [[Hermes]] · [[Fabric_Renderer]] · [[Hydration]]
- Adjacent: [[FFI]] · [[BLoC]]

## 🤖 LLM 활용
**언제**: RN performance critical (60fps list, real-time UI), native module 다수, C++ shared core.
**언제 X**: simple JS-only RN app, legacy 0.6x 유지보수만, Expo Go (managed) — 매 자동 적용.

## ❌ 안티패턴
- **Mixing legacy + new arch native modules without interop layer**: build break.
- **Spec drift**: spec.ts 변경 후 codegen 재실행 안 함 — runtime crash.
- **Sync JSI call from main thread**: UI block — async/queue로 offload.
- **Skipping Hermes**: New Arch는 Hermes 가정 (JSC도 가능하지만 perf 저하).

## 🧪 검증 / 중복
- Verified (React Native docs 2026, Meta engineering blog, RN 0.77 release notes).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — RN New Architecture (JSI/Fabric/TurboModules/Codegen) |