Fabric in React Native — wat is het, renderarchitectuur en hoe het werkt

Wat is Fabric?

Fabric — is een nieuw renderingsysteem voor React Native dat de oude renderer heeft vervangen die via Shadow Thread en Bridge werkte. In de oude architectuur omvatte het renderproces drie stappen: JavaScript berekende Virtual DOM, Shadow Thread (Yoga) berekende de layout, Native Thread rendeerde UIView. Fabric combineert al deze stappen in één C++-pijplijn die synchroon werkt.

De ontwikkeling van Fabric begon in 2019 als onderdeel van het Lean Core-initiatief en het project „Nieuwe Architectuur”. Het hoofddoel was het oplossen van prestatieproblemen gerelateerd aan asynchrone driefasen-rendering. In de oude architectuur vereiste elke statuswijziging drie passages door verschillende threads, wat vertraging veroorzaakte tussen gegevenswijziging en UI-rendering.

Fabric is gebaseerd op het concept van onveranderlijke schaduwboom (Immutable Shadow Tree). Elk knooppunt van de boom vertegenwoordigt een React-component met zijn props en status. Bij statuswijziging wordt een nieuwe boom gemaakt en berekent Fabric het verschil tussen oude en nieuwe boom en past alleen de noodzakelijke wijzigingen toe op de native UI. Dit minimaliseert het aantal bewerkingen met UIView/ViewGroup en verkort de renderingtijd.

Hoe werkt Shadow Tree

Shadow Tree — is de basis van Fabric. In tegenstelling tot de oude architectuur, waar Shadow Tree alleen aan de C++-kant bestond en via asynchrone Bridge van de JS-boom was gescheiden, creëert Fabric een volledig gesynchroniseerde hiërarchische weergave van UI. Shadow Tree-knooppunten slaan props, status en stijlen van componenten op, en Yoga berekent de layout direct op C++-niveau.

Wanneer een React-component zijn status bijwerkt, stuurt React Native een nieuwe Shadow Node naar Fabric. Fabric hertekent niet de hele UI — het gebruikt een vergelijkingsalgoritme (diffing) op C++-niveau om te bepalen welke knooppunten zijn gewijzigd. Alleen gewijzigde knooppunten worden naar native rendering gestuurd, wat de werklast aanzienlijk vermindert.

Driefasen-rendering van Fabric

Het renderproces in Fabric bestaat uit drie fasen die synchroon op C++-niveau worden uitgevoerd zonder threadwisseling. Eerste fase — Render: React roept de renderfunctie van de component aan, die React Element Tree retourneert. Tweede fase — Commit: React Native maakt een nieuwe Shadow Tree en berekent wijzigingen op basis van de oude versie. Derde fase — Mount: Fabric past wijzigingen toe op de native UI, waarbij UIView wordt gemaakt, bijgewerkt of verwijderd.

• Render — wordt uitgevoerd op de JS-thread, maakt React Element Tree.
• Commit — C++ Shadow Tree berekent diff en vormt de mutatielijst.
• Mount — mutaties worden toegepast op de native UI op de hoofdthread.

Alle drie fasen werken als één pijplijn, waar gegevens via JSI zonder serialisatie worden verzonden. Dit is het belangrijkste verschil met de oude architectuur, waar er onderbrekingen waren tussen fasen: JS → (JSON) → Shadow Thread → (layout) → Native Thread.

Fabric vs oude renderer: vergelijking

Vergelijking van Fabric met de oude renderer laat zien hoe aanzienlijk de architectuur van React Native is veranderd. De oude renderer werkte asynchroon en verdeelde het renderproces over drie onafhankelijke threads. Fabric combineert alles in één C++-pijplijn.

In de praktijk is Fabric vooral gunstig voor toepassingen met frequente UI-updates: animaties, scrollen met zwevende koppen, real-time gegevens. Voor statische pagina's (tekst, knoppen) is het verschil minder merkbaar. Volgens Meta-benchmarks vermindert Fabric de renderingtijd van initiële lijst laden met 40–60%.

JSI en Fabric: nieuwe communicatie

JSI (JavaScript Interface) — is het belangrijkste onderdeel dat Fabric mogelijk maakt. Via JSI krijgt Fabric directe toegang tot JavaScript-waarden zonder serialisatie. Wanneer React props naar Fabric verzendt, worden ze niet gekopieerd via JSON — JSI verzendt pointers naar gegevens in het geheugen van de JS-engine.

JSI-architectuur stelt Fabric in staat om met elke JavaScript-engine te werken — Hermes, JSC of V8. De C++-code van Fabric is niet afhankelijk van de specifieke implementatie van de JS-engine, wat onderhoud en testen vereenvoudigt. Alle UI-bewerkingen — maken, bijwerken, verwijderen — worden uitgevoerd via JSI, wat minimale vertraging garandeert.

// Fabric C++-renderpijplijn via JSI
void mountShadowNode(
    jsi::Runtime& runtime,
    const ShadowNode::Shared& shadowNode,
    const ShadowNode::SharedList& children
) {
    auto props = shadowNode->getProps();
    auto state = shadowNode->getState();

    // Synchrone eigenschapsoverdracht via JSI
    jsiValue.asObject(runtime)
        .getProperty(runtime, "style")
        .asObject(runtime);

    // Layoutberekening direct via Yoga
    auto layoutMetrics =
        YogaLayoutableShadowNode::layout(children);

    // Toepassen van mutaties op native UI
    UIManager::synchronouslyUpdateViewOnUIThread(
        shadowNode->getTag(), layoutMetrics
    );
}

Het belangrijkste voordeel — synchrone update. In de oude architectuur werd UI bijgewerkt via een asynchrone wachtrij: React stuurde een opdracht via Bridge, Shadow Thread verwerkte de layout, Native Thread rendeerde. In Fabric worden alle stappen sequentieel in één doorgang uitgevoerd. Dit elimineert race conditions en garandeert dat UI overeenkomt met de huidige staat van de applicatie.

Migratie naar Fabric

Migratie naar Fabric vereist geen herschrijven van React-componenten — alle bestaande React Native-componenten blijven werken. Bibliotheken met native code (Native Module, aangepaste ViewManager) kunnen echter een update nodig hebben. Meta raadt aan om de compatibiliteit van elke bibliotheek te controleren voordat de nieuwe architectuur wordt ingeschakeld.

Om Fabric in een React Native 0.76+ project in te schakelen, stelt u de vlag newArchEnabled: true in in react-native.config.js. Fabric wordt automatisch ingeschakeld samen met Turbo Module. Bij problemen kan Fabric worden uitgeschakeld door terug te keren naar de oude renderer zonder de applicatiecode te wijzigen — beide architecturen worden parallel ondersteund.

// package.json — controleer Fabric-compatibele bibliotheken
"react-native": "0.76.6",
"react-native-safe-area-context": "^5.0.0",
"react-native-screens": "^4.0.0",
"react-native-reanimated": "^3.16.0",
"react-native-gesture-handler": "^2.21.0"

Tijdens migratie is het belangrijk om alle native bibliotheken bij te werken naar versies die compatibel zijn met Fabric. Grote bibliotheken zoals react-native-reanimated en react-native-gesture-handler ondersteunen al de nieuwe architectuur. Voor bibliotheken die nog niet zijn bijgewerkt, biedt Fabric een compatibiliteitsmechanisme — als een bibliotheek Fabric niet ondersteunt, schakelt de renderer automatisch over naar de oude voor die bibliotheek.