Fabric in React Native — cos’è, architettura di rendering e come funziona

Cos’è Fabric?

Fabric è un nuovo sistema di rendering per React Native che ha sostituito il vecchio renderizzatore, che funzionava tramite Shadow Thread e Bridge. Nell’architettura vecchia, il processo di rendering comprendeva tre passaggi: JavaScript calcola il Virtual DOM, Shadow Thread (Yoga) calcola il layout, Native Thread disegna UIView. Fabric combina tutti questi passaggi in un’unica pipeline C++ che funziona in modo sincrono.

Lo sviluppo di Fabric è iniziato nel 2019 come parte dell’iniziativa Lean Core e del progetto “The New Architecture”. L’obiettivo principale era risolvere i problemi di prestazioni associati al rendering asincrono a tre passaggi. Nell’architettura vecchia, ogni cambiamento di stato richiedeva tre passaggi attraverso thread diversi, creando un ritardo tra il cambiamento dei dati e il rendering dell’UI.

Fabric si basa sul concetto di Shadow Tree Immutabile (Immutable Shadow Tree). Ogni nodo dell’albero rappresenta un componente React con le sue props e il suo stato. Quando lo stato cambia, viene creato un nuovo albero e Fabric calcola la differenza tra l’albero vecchio e quello nuovo e applica solo le modifiche necessarie all’UI nativa. Ciò minimizza il numero di operazioni UIView/ViewGroup e riduce il tempo di rendering.

Come funziona Shadow Tree

Shadow Tree è il fondamento del funzionamento di Fabric. A differenza dell’architettura vecchia, dove Shadow Tree esisteva solo sul lato C++ ed era separato dall’albero JS tramite il Bridge asincrono, Fabric crea una rappresentazione gerarchica completamente sincronizzata dell’UI. I nodi di Shadow Tree memorizzano props, stato e stili dei componenti, mentre Yoga calcola il layout direttamente a livello C++.

Quando un componente React aggiorna il suo stato, React Native invia un nuovo Shadow Node a Fabric. Fabric non ri-renderizza tutta l’UI — utilizza un algoritmo di diffing a livello C++ per determinare quali nodi sono cambiati. Solo i nodi modificati vengono inviati per il rendering nativo, riducendo significativamente la quantità di lavoro.

Rendering a tre fasi di Fabric

Il processo di rendering in Fabric consiste in tre fasi che vengono eseguite in modo sincrono a livello C++ senza cambio di thread. La prima fase è Render: React chiama la funzione di rendering del componente, che restituisce un React Element Tree. La seconda fase è Commit: React Native crea un nuovo Shadow Tree e calcola le modifiche basate sulla vecchia versione. La terza fase è Mount: Fabric applica le modifiche all’UI nativa, creando, aggiornando o eliminando UIViews.

• Render — eseguito sul thread JS, crea un React Element Tree.
• Commit — lo Shadow Tree C++ calcola il diff e forma un elenco di mutazioni.
• Mount — le mutazioni vengono applicate all’UI nativa sul thread principale.

Tutte e tre le fasi funzionano come un’unica pipeline dove i dati vengono trasferiti tramite JSI senza serializzazione. Questa è una differenza fondamentale rispetto all’architettura vecchia, dove c’erano interruzioni tra le fasi: JS → (JSON) → Shadow Thread → (layout) → Native Thread.

Fabric vs vecchio renderizzatore: confronto

Il confronto di Fabric con il vecchio renderizzatore dimostra quanto significativamente sia cambiata l’architettura di React Native. Il vecchio renderizzatore funzionava in modo asincrono, dividendo il processo di rendering in tre thread indipendenti. Fabric combina tutto in un’unica pipeline C++.

In pratica, Fabric è particolarmente vantaggioso per le applicazioni con aggiornamenti UI frequenti: animazioni, scroll con intestazioni fluttuanti, dati in tempo reale. Per le pagine statiche (testo, pulsanti) la differenza è meno evidente. Secondo i benchmark di Meta, Fabric riduce il tempo di rendering iniziale delle liste del 40–60%.

JSI e Fabric: nuova comunicazione

JSI (JavaScript Interface) è un componente chiave che rende possibile Fabric. Tramite JSI, Fabric ottiene accesso diretto ai valori JavaScript senza serializzazione. Quando React passa props a Fabric, questi non vengono copiati tramite JSON — JSI passa puntatori ai dati nella memoria del motore JS.

L’architettura JSI consente a Fabric di funzionare con qualsiasi motore JavaScript — Hermes, JSC o V8. Il codice C++ di Fabric non dipende da una specifica implementazione del motore JS, semplificando la manutenzione e i test. Tutte le operazioni UI — creazione, aggiornamento, eliminazione — vengono eseguite tramite JSI, garantendo una latenza minima.

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

    // Trasferimento sincrono delle props tramite JSI
    jsiValue.asObject(runtime)
        .getProperty(runtime, "style")
        .asObject(runtime);

    // Calcolo del layout direttamente tramite Yoga
    auto layoutMetrics =
        YogaLayoutableShadowNode::layout(children);

    // Applicare le mutazioni all’UI nativa
    UIManager::synchronouslyUpdateViewOnUIThread(
        shadowNode->getTag(), layoutMetrics
    );
}

Il vantaggio principale è l’aggiornamento sincrono. Nell’architettura vecchia, l’UI veniva aggiornata tramite una coda asincrona: React inviava un comando tramite Bridge, Shadow Thread elaborava il layout, Native Thread renderizzava. In Fabric, tutti i passaggi vengono eseguiti sequenzialmente in un unico passaggio. Ciò elimina le race condition e garantisce che l’UI corrisponda allo stato corrente dell’applicazione.

Migrazione a Fabric

La migrazione a Fabric non richiede la riscrittura dei componenti React — tutti i componenti React Native esistenti continuano a funzionare. Tuttavia, le librerie con codice nativo (Native Module, ViewManager personalizzato) potrebbero richiedere aggiornamenti. Meta raccomanda di verificare la compatibilità di ciascuna libreria prima di abilitare la nuova architettura.

Per abilitare Fabric in un progetto React Native 0.76+, impostare il flag newArchEnabled: true in react-native.config.js. Fabric si abiliterà automaticamente insieme a Turbo Module. In caso di problemi, è possibile disabilitare Fabric tornando al vecchio renderizzatore senza modificare il codice dell’applicazione — entrambe le architetture sono supportate in parallelo.

// package.json — verificare le librerie compatibili con Fabric
"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"

Durante la migrazione, è importante aggiornare tutte le librerie native a versioni compatibili con Fabric. Librerie principali come react-native-reanimated e react-native-gesture-handler supportano già la nuova architettura. Per le librerie non ancora aggiornate, Fabric fornisce un meccanismo di compatibilità — se una libreria non supporta Fabric, il renderizzatore torna automaticamente a quello vecchio per quella libreria.