Boas Práticas Fundamentais do React Native

Um resumo condensado das 25 melhores práticas mais importantes, extraídas de cada página desta seção.

1. Envolva strings em Text: React Native não possui nós de texto DOM - colocar uma string pura dentro de View gera um redbox. Cada caractere visível ao usuário deve estar dentro de <Text>.

2. Conheça o padrão flex: O flex do React Native tem como padrão column, o oposto do CSS da web. Defina flexDirection: "row" explicitamente sempre que desejar um layout horizontal.

3. Cacheie estilos com StyleSheet.create: Definir objetos de estilo inline cria novas referências a cada renderização. StyleSheet.create registra os estilos uma vez e permite que o lado nativo os cacheie para melhor desempenho.

4. Aplique safe area uma vez na raiz da tela: Aninhar componentes SafeAreaView ou combiná-los com paddingTop: insets.top manual dobra o inset. Escolha um proprietário por eixo - geralmente o wrapper de tela mais externo.

5. Use contentContainerStyle para padding do ScrollView: O padding no próprio ScrollView recorta os indicadores de rolagem de forma estranha no iOS. Coloque o espaçamento interno em contentContainerStyle, não no contêiner de rolagem.

6. Combine sombras iOS com elevation Android: shadowColor e shadowOffset são ignorados no Android. Use Platform.select para aplicar props de sombra do iOS juntamente com elevation.

7. Aninhe Text dentro de Text para spans inline: Envolver palavras individuais em View quebra o fluxo de texto inline e prejudica a acessibilidade. Use nós <Text> aninhados para spans inline em negrito, coloridos ou com links.

8. Trate props como somente leitura: Mutar uma prop ou objeto de estado in-place (todo.done = true; setTodos(todos)) pode pular re-renderizações porque a referência não muda. Sempre retorne novos objetos e arrays dos atualizadores.

9. Derive valores computáveis durante a renderização: Armazenar listas filtradas ou ordenadas em useState separado duplica atualizações e arrisca dessincronização. Use useMemo para derivar da única fonte de verdade.

10. Estabilize callbacks em listas virtualizadas: onPress={() => toggle(id)} inline dentro de renderItem quebra memo a cada renderização. Passe manipuladores useCallback estáveis ou deixe componentes de linha memoizados possuírem o manipulador.

11. Memoize objetos de valor de contexto: value={{ user, theme }} recriado a cada renderização re-renderiza todos os consumidores. Memoize o objeto de valor ou divida contextos por frequência de atualização.

12. Profile antes de otimizar demais: useMemo e useCallback têm seu próprio custo. Otimize linhas de lista e computações puras genuinamente caras - não todo objeto inline.

13. Prefira Pressable a TouchableOpacity: Pressable expõe os estados pressed, hovered e focused, envia android_ripple e hitSlop como recursos de primeira classe, e evita o desvanecimento da opacidade em toda uma subárvore.

14. Atinga alvos de toque mínimos de 44pt: Um ícone de 20×20 sem padding falha nos mínimos do HIG e Material. Adicione hitSlop ou envolva com padding para que a área interativa atinja aproximadamente 44×44 pontos.

15. Mostre o estado desabilitado visual e semanticamente: disabled silencia onPress, mas o controle ainda pode parecer ativo. Combine estilos desabilitados, accessibilityState={{ disabled: true }} e pointerEvents onde overlays competem.

16. Use Platform.select para pequenas diferenças: Dividir arquivos .ios e .android para uma diferença de cor de uma linha adiciona sobrecarga de manutenção. Reserve arquivos específicos da plataforma para UI materialmente diferentes ou imports nativos.

17. Importe o nome do arquivo base, não .ios: import X from "./Foo.ios" quebra os bundles Android. Importe ./Foo e deixe o Metro resolver o arquivo de plataforma correto.

18. Sempre inclua um padrão em Platform.select: Web e outros alvos Expo recebem undefined sem uma chave default. Cada chamada Platform.select em um aplicativo multiplataforma precisa de um fallback.

19. Defina dimensões explícitas em imagens remotas: Imagens { uri } sem width, height ou aspectRatio renderizam em 0×0 e aparecem invisíveis. Sempre restrinja o layout para fontes de rede.

20. Mantenha os caminhos require() estáticos: Metro analisa os imports de assets no momento da compilação - require('./assets/' + name + '.png') falha. Use um mapa de lookup constante de requires estáticos em vez disso.

21. Pré-carregue assets antes de ocultar o splash: Ocultar o splash imediatamente enquanto as imagens decodificam mostra um flash em branco. await Asset.loadAsync(...) e então chame SplashScreen.hideAsync().

22. Assine mudanças de dimensão com um hook: Dimensions.get('window') é um snapshot - a UI permanece em layout retrato após a rotação. Use useWindowDimensions() ou Dimensions.addEventListener.

23. Use breakpoints de largura para tablets multiplataforma: Platform.isPad cobre apenas o iOS. Um breakpoint de largura lógico (por exemplo, >= 768) funciona em tablets Android e foldables também.

24. Assuma Nova Arquitetura por padrão no RN 0.86: Expo SDK 57 envia com Fabric e TurboModules habilitados. Verifique a compatibilidade da biblioteca com a Nova Arquitetura antes de atualizar - o sucesso da compilação não garante estabilidade em tempo de execução.

25. Depure Hermes com React Native DevTools: A depuração remota no Chrome não se conecta fielmente ao bytecode Hermes. Pressione j no Metro ou use o menu de desenvolvimento para abrir o React Native DevTools para breakpoints e profiling no dispositivo.

FAQs

Relacionado

• Fundamentos do React Native - tour introdutório prático de primitivas principais
• Views, Text e Componentes Principais - primitivas de layout e regras de aninhamento de texto
• Props, State e Re-renders no Mobile - como as atualizações se propagam para views nativas
• Manipulação de Eventos e Touchables - padrões Pressable e hitSlop
• Dimensões e Layout Responsivo - breakpoints e layouts de tablet
• A Bridge, JSI e a Nova Arquitetura - bridge legado vs Fabric/TurboModules

Versões da Stack: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (expo ~57.0.4).