Fabric en React Native — qué es, arquitectura de renderizado y cómo funciona

¿Qué es Fabric?

Fabric es un nuevo sistema de renderizado para React Native que reemplazó al antiguo renderizador, que funcionaba a través de Shadow Thread y Bridge. En la arquitectura antigua, el proceso de renderizado incluía tres pasos: JavaScript calcula el Virtual DOM, Shadow Thread (Yoga) calcula el diseño, Native Thread dibuja UIView. Fabric combina todos estos pasos en un único pipeline C++ que funciona de forma síncrona.

El desarrollo de Fabric comenzó en 2019 como parte de la iniciativa Lean Core y el proyecto “The New Architecture”. El objetivo principal era resolver los problemas de rendimiento asociados con el renderizado asíncrono de tres rondas. En la arquitectura antigua, cada cambio de estado requería tres pases a través de diferentes hilos, creando un retraso entre el cambio de datos y el renderizado de la UI.

Fabric se basa en el concepto de Árbol Sombra Inmutable (Immutable Shadow Tree). Cada nodo del árbol representa un componente de React con sus props y estado. Cuando el estado cambia, se crea un nuevo árbol, y Fabric calcula la diferencia entre el árbol viejo y el nuevo y aplica solo los cambios necesarios a la UI nativa. Esto minimiza la cantidad de operaciones de UIView/ViewGroup y reduce el tiempo de renderizado.

Cómo funciona Shadow Tree

Shadow Tree es la base del funcionamiento de Fabric. A diferencia de la arquitectura antigua, donde el Shadow Tree existía solo en el lado de C++ y estaba separado del árbol JS a través del Bridge asíncrono, Fabric crea una representación jerárquica completamente sincronizada de la UI. Los nodos de Shadow Tree almacenan props, estado y estilos de los componentes, mientras que Yoga calcula el diseño directamente en el nivel de C++.

Cuando un componente de React actualiza su estado, React Native envía un nuevo Shadow Node a Fabric. Fabric no vuelve a renderizar toda la UI — utiliza un algoritmo de comparación (diffing) en el nivel de C++ para determinar qué nodos han cambiado. Solo los nodos modificados se envían para el renderizado nativo, lo que reduce significativamente la cantidad de trabajo.

Renderizado de tres fases de Fabric

El proceso de renderizado en Fabric consta de tres fases que se ejecutan de forma síncrona en el nivel de C++ sin cambio de hilos. La primera fase es Render: React llama a la función de renderizado del componente, que devuelve un Árbol de Elementos React. La segunda fase es Commit: React Native crea un nuevo Shadow Tree y calcula los cambios basándose en la versión anterior. La tercera fase es Mount: Fabric aplica los cambios a la UI nativa, creando, actualizando o eliminando UIViews.

• Render — se ejecuta en el hilo JS, crea un Árbol de Elementos React.
• Commit — el Shadow Tree C++ calcula el diff y forma una lista de mutaciones.
• Mount — las mutaciones se aplican a la UI nativa en el hilo principal.

Las tres fases funcionan como un único pipeline donde los datos se transfieren a través de JSI sin serialización. Esta es una diferencia clave con la arquitectura antigua, donde había espacios entre las fases: JS → (JSON) → Shadow Thread → (diseño) → Native Thread.

Fabric vs antiguo renderizador: comparación

La comparación de Fabric con el antiguo renderizador demuestra cuán significativamente ha cambiado la arquitectura de React Native. El antiguo renderizador funcionaba de forma asíncrona, dividiendo el proceso de renderizado en tres hilos independientes. Fabric combina todo en un único pipeline C++.

En la práctica, Fabric es especialmente beneficioso para aplicaciones con actualizaciones frecuentes de la UI: animaciones, desplazamientos con encabezados flotantes, datos en tiempo real. Para páginas estáticas (texto, botones) la diferencia es menos notable. Según los benchmarks de Meta, Fabric reduce el tiempo de renderizado inicial de listas en un 40–60%.

JSI y Fabric: nueva comunicación

JSI (JavaScript Interface) es un componente clave que hace posible Fabric. A través de JSI, Fabric obtiene acceso directo a los valores de JavaScript sin serialización. Cuando React pasa props a Fabric, no se copian a través de JSON — JSI pasa punteros a los datos en la memoria del motor JS.

La arquitectura JSI permite que Fabric funcione con cualquier motor de JavaScript — Hermes, JSC o V8. El código C++ de Fabric no depende de una implementación específica del motor JS, lo que simplifica el mantenimiento y las pruebas. Todas las operaciones de UI — creación, actualización, eliminación — se realizan a través de JSI, lo que garantiza una latencia mínima.

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

    // Transferencia síncrona de props a través de JSI
    jsiValue.asObject(runtime)
        .getProperty(runtime, "style")
        .asObject(runtime);

    // Cálculo de diseño directamente a través de Yoga
    auto layoutMetrics =
        YogaLayoutableShadowNode::layout(children);

    // Aplicar mutaciones a la UI nativa
    UIManager::synchronouslyUpdateViewOnUIThread(
        shadowNode->getTag(), layoutMetrics
    );
}

La ventaja clave es la actualización síncrona. En la arquitectura antigua, la UI se actualizaba a través de una cola asíncrona: React enviaba un comando a través de Bridge, Shadow Thread procesaba el diseño, Native Thread renderizaba. En Fabric, todos los pasos se ejecutan secuencialmente en un solo pase. Esto elimina las condiciones de carrera y garantiza que la UI coincida con el estado actual de la aplicación.

Migración a Fabric

La migración a Fabric no requiere reescribir los componentes de React — todos los componentes existentes de React Native siguen funcionando. Sin embargo, las bibliotecas con código nativo (Native Module, ViewManager personalizado) pueden requerir actualizaciones. Meta recomienda verificar la compatibilidad de cada biblioteca antes de habilitar la nueva arquitectura.

Para habilitar Fabric en un proyecto de React Native 0.76+, establezca el flag newArchEnabled: true en react-native.config.js. Fabric se habilitará automáticamente junto con Turbo Module. Si surgen problemas, Fabric se puede deshabilitar volviendo al antiguo renderizador sin cambiar el código de la aplicación — ambas arquitecturas son compatibles en paralelo.

// package.json — verificar bibliotecas compatibles 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"

Al migrar, es importante actualizar todas las bibliotecas nativas a versiones compatibles con Fabric. Las bibliotecas principales como react-native-reanimated y react-native-gesture-handler ya admiten la nueva arquitectura. Para las bibliotecas que aún no se han actualizado, Fabric proporciona un mecanismo de compatibilidad — si una biblioteca no es compatible con Fabric, el renderizador vuelve automáticamente al antiguo para esa biblioteca.