Fabric dans React Native — qu’est-ce que c’est, architecture de rendu et comment ça marche

Qu’est-ce que Fabric ?

Fabric est un nouveau système de rendu pour React Native qui a remplacé l’ancien moteur de rendu fonctionnant via Shadow Thread et Bridge. Dans l’ancienne architecture, le processus de rendu comprenait trois étapes : JavaScript calcule le Virtual DOM, Shadow Thread (Yoga) calcule la mise en page, Native Thread dessine UIView. Fabric combine toutes ces étapes en un seul pipeline C++ qui fonctionne de manière synchrone.

Le développement de Fabric a commencé en 2019 dans le cadre de l’initiative Lean Core et du projet « The New Architecture ». L’objectif principal était de résoudre les problèmes de performances liés au rendu asynchrone à trois passes. Dans l’ancienne architecture, chaque changement d’état nécessitait trois passages à travers différents threads, créant un délai entre le changement de données et le rendu de l’UI.

Fabric est basé sur le concept d’arbre fantôme immuable (Immutable Shadow Tree). Chaque nœud de l’arbre représente un composant React avec ses props et son état. Lorsque l’état change, un nouvel arbre est créé, et Fabric calcule la différence entre l’ancien et le nouvel arbre et n’applique que les changements nécessaires à l’UI native. Cela minimise le nombre d’opérations UIView/ViewGroup et réduit le temps de rendu.

Comment fonctionne Shadow Tree

Shadow Tree est le fondement du fonctionnement de Fabric. Contrairement à l’ancienne architecture, où Shadow Tree n’existait que du côté C++ et était séparé de l’arbre JS via le Bridge asynchrone, Fabric crée une représentation hiérarchique entièrement synchronisée de l’UI. Les nœuds de Shadow Tree stockent les props, l’état et les styles des composants, tandis que Yoga calcule la mise en page directement au niveau C++.

Lorsqu’un composant React met à jour son état, React Native envoie un nouveau Shadow Node à Fabric. Fabric ne re-rend pas toute l’UI — il utilise un algorithme de différence au niveau C++ pour déterminer quels nœuds ont changé. Seuls les nœuds modifiés sont envoyés pour le rendu natif, ce qui réduit considérablement la quantité de travail.

Rendu en trois phases de Fabric

Le processus de rendu dans Fabric comprend trois phases qui s’exécutent de manière synchrone au niveau C++ sans changement de thread. La première phase est Render : React appelle la fonction de rendu du composant, qui retourne un arbre d’éléments React. La deuxième phase est Commit : React Native crée un nouveau Shadow Tree et calcule les changements basés sur l’ancienne version. La troisième phase est Mount : Fabric applique les changements à l’UI native, créant, mettant à jour ou supprimant des UIViews.

• Render — exécuté sur le thread JS, crée un arbre d’éléments React.
• Commit — le Shadow Tree C++ calcule le diff et forme une liste de mutations.
• Mount — les mutations sont appliquées à l’UI native sur le thread principal.

Les trois phases fonctionnent comme un seul pipeline où les données sont transférées via JSI sans sérialisation. C’est une différence clé par rapport à l’ancienne architecture, où il y avait des ruptures entre les phases : JS → (JSON) → Shadow Thread → (mise en page) → Native Thread.

Fabric vs ancien moteur de rendu : comparaison

La comparaison de Fabric avec l’ancien moteur de rendu montre à quel point l’architecture de React Native a changé. L’ancien moteur de rendu fonctionnait de manière asynchrone, divisant le processus de rendu en trois threads indépendants. Fabric combine tout en un seul pipeline C++.

En pratique, Fabric est particulièrement bénéfique pour les applications avec des mises à jour fréquentes de l’UI : animations, défilements avec en-têtes flottants, données en temps réel. Pour les pages statiques (texte, boutons) la différence est moins notable. Selon les benchmarks de Meta, Fabric réduit le temps de rendu initial des listes de 40–60%.

JSI et Fabric : nouvelle communication

JSI (JavaScript Interface) est un composant clé qui rend Fabric possible. Grâce à JSI, Fabric obtient un accès direct aux valeurs JavaScript sans sérialisation. Lorsque React transmet des props à Fabric, elles ne sont pas copiées via JSON — JSI transmet des pointeurs vers les données dans la mémoire du moteur JS.

L’architecture JSI permet à Fabric de fonctionner avec n’importe quel moteur JavaScript — Hermes, JSC ou V8. Le code C++ de Fabric ne dépend pas d’une implémentation spécifique du moteur JS, ce qui simplifie la maintenance et les tests. Toutes les opérations de l’UI — création, mise à jour, suppression — sont effectuées via JSI, garantissant une latence minimale.

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

    // Transfert synchrone de props via JSI
    jsiValue.asObject(runtime)
        .getProperty(runtime, "style")
        .asObject(runtime);

    // Calcul de mise en page directement via Yoga
    auto layoutMetrics =
        YogaLayoutableShadowNode::layout(children);

    // Appliquer les mutations à l’UI native
    UIManager::synchronouslyUpdateViewOnUIThread(
        shadowNode->getTag(), layoutMetrics
    );
}

L’avantage clé est la mise à jour synchrone. Dans l’ancienne architecture, l’UI était mise à jour via une file d’attente asynchrone : React envoyait une commande via Bridge, Shadow Thread traitait la mise en page, Native Thread rendait. Dans Fabric, toutes les étapes sont exécutées séquentiellement en un seul passage. Cela élimine les conditions de concurrence et garantit que l’UI correspond à l’état actuel de l’application.

Migration vers Fabric

La migration vers Fabric ne nécessite pas de réécrire les composants React — tous les composants React Native existants continuent de fonctionner. Cependant, les bibliothèques avec du code natif (Native Module, ViewManager personnalisé) peuvent nécessiter des mises à jour. Meta recommande de vérifier la compatibilité de chaque bibliothèque avant d’activer la nouvelle architecture.

Pour activer Fabric dans un projet React Native 0.76+, définissez le flag newArchEnabled : true dans react-native.config.js. Fabric s’activera automatiquement avec Turbo Module. En cas de problème, Fabric peut être désactivé en revenant à l’ancien moteur de rendu sans modifier le code de l’application — les deux architectures sont prises en charge en parallèle.

// package.json — vérifier les bibliothèques compatibles 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"

Lors de la migration, il est important de mettre à jour toutes les bibliothèques natives vers des versions compatibles avec Fabric. Les bibliothèques majeures comme react-native-reanimated et react-native-gesture-handler prennent déjà en charge la nouvelle architecture. Pour les bibliothèques qui n’ont pas encore été mises à jour, Fabric fournit un mécanisme de compatibilité — si une bibliothèque ne prend pas en charge Fabric, le moteur de rendu revient automatiquement à l’ancien pour cette bibliothèque.