rn-performance

React Native — Performance

Objetivo

Entregar UI fluida e inicialização rápida, otimizando com base em medição, não em suposição.

Quando utilizar

• Jank em scroll/animação, renders excessivos ou telas lentas.
• Alto uso de memória ou tempo de inicialização elevado.
• Revisão de performance de listas e componentes pesados.

Conhecimentos necessários

• Modelo de threads do RN (JS thread vs UI/main thread).
• Profiling (ex.: Flipper, React DevTools Profiler, Perf Monitor, Hermes).
• Memoização (memo, useMemo, useCallback) e integridade referencial.
• Virtualização de listas e otimização de imagens.

Fluxo de execução

1. Meça primeiro: reproduza e faça profiling; identifique o gargalo real.
2. Isole a causa (re-render, trabalho na main thread, lista não virtualizada, imagem grande).
3. Aplique a correção mínima (memoização, selector granular, virtualização, mover trabalho para a UI thread).
4. Meça de novo e compare; evite otimização especulativa.
5. Adicione uma guarda contra regressão quando possível.

Boas práticas

• Componentes/hooks puros; props referencialmente estáveis.
• Listas virtualizadas com keyExtractor estável e item memoizado.
• Anime na UI thread; evite bloquear a JS thread.
• Lazy load de telas/recursos; imagens dimensionadas e cacheadas.

Armadilhas comuns

• Otimizar sem medir.
• Literais inline de objeto/função quebrando memo.
• index como key em listas.
• Trabalho síncrono pesado no render ou na main thread.

Critérios de sucesso

• Gargalo medido antes e depois, com ganho comprovado.
• Sem jank perceptível no fluxo alvo.
• Sem re-renders desnecessários no caminho crítico.