Fabric no React Native — o que é, arquitetura de renderização e como funciona

O que é Fabric?

Fabric é um novo sistema de renderização para React Native que substituiu o antigo renderizador, que funcionava através do Shadow Thread e Bridge. Na arquitetura antiga, o processo de renderização incluía três etapas: JavaScript calcula o Virtual DOM, Shadow Thread (Yoga) calcula o layout, Native Thread desenha a UIView. Fabric combina todas essas etapas em um único pipeline C++ que funciona de forma síncrona.

O desenvolvimento do Fabric começou em 2019 como parte da iniciativa Lean Core e do projeto “The New Architecture”. O objetivo principal era resolver problemas de desempenho associados à renderização assíncrona de três voltas. Na arquitetura antiga, cada alteração de estado exigia três passagens por threads diferentes, criando um atraso entre a alteração de dados e a renderização da UI.

Fabric é baseado no conceito de Árvore Sombra Imutável (Immutable Shadow Tree). Cada nó da árvore representa um componente React com suas props e estado. Quando o estado muda, uma nova árvore é criada, e o Fabric calcula a diferença entre a árvore antiga e a nova e aplica apenas as alterações necessárias à UI nativa. Isso minimiza o número de operações UIView/ViewGroup e reduz o tempo de renderização.

Como funciona o Shadow Tree

Shadow Tree é a base do funcionamento do Fabric. Ao contrário da arquitetura antiga, onde a Shadow Tree existia apenas no lado C++ e estava separada da árvore JS através do Bridge assíncrono, o Fabric cria uma representação hierárquica totalmente sincronizada da UI. Os nós da Shadow Tree armazenam props, estado e estilos dos componentes, enquanto o Yoga calcula o layout diretamente no nível C++.

Quando um componente React atualiza seu estado, o React Native envia um novo Shadow Node para o Fabric. O Fabric não renderiza novamente toda a UI — ele usa um algoritmo de comparação (diffing) no nível C++ para determinar quais nós foram alterados. Apenas os nós alterados são enviados para renderização nativa, o que reduz significativamente a quantidade de trabalho.

Renderização de três fases do Fabric

O processo de renderização no Fabric consiste em três fases que são executadas de forma síncrona no nível C++ sem alternância de threads. A primeira fase é Render: o React chama a função de renderização do componente, que retorna uma Árvore de Elementos React. A segunda fase é Commit: o React Native cria uma nova Shadow Tree e calcula as alterações com base na versão antiga. A terceira fase é Mount: o Fabric aplica as alterações à UI nativa, criando, atualizando ou excluindo UIViews.

• Render — executado na thread JS, cria uma Árvore de Elementos React.
• Commit — a Shadow Tree C++ calcula o diff e forma uma lista de mutações.
• Mount — as mutações são aplicadas à UI nativa na thread principal.

As três fases funcionam como um único pipeline onde os dados são transferidos através do JSI sem serialização. Esta é uma diferença fundamental em relação à arquitetura antiga, onde haviam lacunas entre as fases: JS → (JSON) → Shadow Thread → (layout) → Native Thread.

Fabric vs renderizador antigo: comparação

A comparação do Fabric com o renderizador antigo demonstra o quanto a arquitetura do React Native mudou significativamente. O renderizador antigo funcionava de forma assíncrona, dividindo o processo de renderização em três threads independentes. O Fabric combina tudo em um único pipeline C++.

Na prática, o Fabric é especialmente benéfico para aplicativos com atualizações frequentes da UI: animações, scrolls com cabeçalhos flutuantes, dados em tempo real. Para páginas estáticas (texto, botões) a diferença é menos perceptível. De acordo com os benchmarks da Meta, o Fabric reduz o tempo de renderização inicial de listas em 40–60%.

JSI e Fabric: nova comunicação

JSI (JavaScript Interface) é um componente chave que torna o Fabric possível. Através do JSI, o Fabric obtém acesso direto aos valores JavaScript sem serialização. Quando o React passa props para o Fabric, eles não são copiados através de JSON — o JSI passa ponteiros para os dados na memória do mecanismo JS.

A arquitetura JSI permite que o Fabric funcione com qualquer mecanismo JavaScript — Hermes, JSC ou V8. O código C++ do Fabric não depende de uma implementação específica do mecanismo JS, o que simplifica a manutenção e os testes. Todas as operações de UI — criação, atualização, exclusão — são realizadas através do JSI, garantindo latência mínima.

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

    // Transferência síncrona de props via JSI
    jsiValue.asObject(runtime)
        .getProperty(runtime, "style")
        .asObject(runtime);

    // Cálculo de layout diretamente através do Yoga
    auto layoutMetrics =
        YogaLayoutableShadowNode::layout(children);

    // Aplicar mutações à UI nativa
    UIManager::synchronouslyUpdateViewOnUIThread(
        shadowNode->getTag(), layoutMetrics
    );
}

A principal vantagem é a atualização síncrona. Na arquitetura antiga, a UI era atualizada através de uma fila assíncrona: o React enviava um comando através do Bridge, o Shadow Thread processava o layout, o Native Thread renderizava. No Fabric, todas as etapas são executadas sequencialmente em uma única passagem. Isso elimina condições de corrida e garante que a UI corresponda ao estado atual do aplicativo.

Migração para Fabric

A migração para o Fabric não exige reescrever os componentes React — todos os componentes existentes do React Native continuam funcionando. No entanto, bibliotecas com código nativo (Native Module, ViewManager personalizado) podem precisar de atualizações. A Meta recomenda verificar a compatibilidade de cada biblioteca antes de habilitar a nova arquitetura.

Para habilitar o Fabric em um projeto React Native 0.76+, defina a flag newArchEnabled: true no react-native.config.js. O Fabric será habilitado automaticamente junto com o Turbo Module. Se surgirem problemas, o Fabric pode ser desabilitado revertendo para o renderizador antigo sem alterar o código do aplicativo — ambas as arquiteturas são suportadas em paralelo.

// package.json — verificar bibliotecas compatíveis com 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"

Ao migrar, é importante atualizar todas as bibliotecas nativas para versões compatíveis com o Fabric. Bibliotecas principais como react-native-reanimated e react-native-gesture-handler já suportam a nova arquitetura. Para bibliotecas que ainda não foram atualizadas, o Fabric fornece um mecanismo de compatibilidade — se uma biblioteca não suporta o Fabric, o renderizador volta automaticamente para o antigo para essa biblioteca.