Em Relação A Hierarquia De Componentes Nativos

Entendendo a hierarquia de componentes nativos no React Native

Quando você constrói uma tela no React Native, existe uma separação importante entre o que roda na JavaScript thread e o que roda na main thread do dispositivo. Os componentes nativos são os que delegam trabalho para a camada nativa, enquanto os componentes view-only ficam apenas na JS layer. Isso define toda a performance e o comportamento do seu app. A hierarquia funciona assim: cada componente que você declara no React Native pode ser mapeado para um componente nativo específico, como UIView no iOS ou ViewGroup no Android. O React Native faz esse mapping de forma transparente, mas o problema é que nem todo componente visual é nativo. Text inputs, images, scroll views — esses sim são componentes nativos de verdade. Outros, como divs estilizados com flexbox, vivem no bridge e precisam ser sincronizados. Eu tive um problema recente com um FlatList que simplesmente travava em dispositivos mais antigos. O que acontecia era que cada item da lista criava uma hierarquia de componentes nativos profundamente aninhada, e a renderização na main thread não conseguia acompanhar. A solução foi simplificar a estrutura interna de cada cell, removendo componentes aninhados desnecessários e forçando o uso de View nativas planas. O resultado foi uma melhoria de 40% no framerate.

Outro ponto que muita gente não considera: o custo de comunicação entre a JS thread e a main thread não é gratuito. Cada vez que um estado muda e precisa ser refletido no componente nativo, há uma serialização e transporte de dados. Em telas com muitas atualizações por segundo, isso vira gargalo. A saída mais prática é batch de atualizações usando useLayoutEffect ou otimizações no próprio componente nativo. Componentes nativos também variam de plataforma. Um ScrollView no iOS não é o mesmo que no Android, e isso importa quando você precisa de comportamento idêntico. A biblioteca React Native já padroniza bastante, mas edge cases existem. Por exemplo, o behavior de overscroll differa entre as plataformas e pode quebrar animações se você não tratar explicitamente. Se você está começando agora, recomendo olhar os componentes oferecidos pela própria lib antes de criar wrappers customizados. Cada wrapper que você adiciona aumenta a profundidade da hierarquia e o custo de renderização. Em projetos maiores, essa diferença acumula e se torna visível na prática.

Para baixar a documentação oficial do React Native e ver a lista completa de componentes nativos disponíveis, acesse o repositório oficial no GitHub ou a seção de API Reference no site do framework.