Como você otimiza o desempenho de um aplicativo React Native?

Question

Accepted Answer

Otimizar o desempenho do React Native envolve minimizar **re-renders** desnecessários, usar **listas** eficientes, reduzir **trabalho da thread JS** e tráfego da bridge, otimizar imagens e usar a thread nativa para animações. O desempenho é importante para aplicativos suaves e responsivos.

## Minimizar re-renders (uma preocupação-chave do React)

```text
✓ Avoid unnecessary RE-RENDERS:
  → React.memo (memoize components), useMemo (values), useCallback (functions)
  → correct, stable KEYS in lists; avoid creating new objects/functions inline that
    cause children to re-render
  → proper state structure (don't put everything in one big state that re-renders all)
```

## Listas eficientes

```text
✓ Use FLATLIST (not ScrollView + map) for long lists — lazy rendering/virtualization
✓ Optimize FlatList: keyExtractor, getItemLayout, windowSize, removeClippedSubviews;
  keep item components light and memoized
✓ For very large/complex lists → FlashList (Shopify) — a faster drop-in alternative
```

## Thread JS e bridge

```text
✓ The JS thread runs your code — keep it free for responsiveness (avoid heavy synchronous
  work; it causes jank/dropped frames)
✓ Minimize BRIDGE traffic (old architecture) — frequent JS↔native passes are costly
  (the NEW ARCHITECTURE / JSI reduces this)
✓ Run ANIMATIONS on the native thread (useNativeDriver / Reanimated) — not the JS thread
✓ Offload heavy computation; debounce expensive operations
```

## Outras otimizações

```text
✓ Optimize IMAGES (sizes, caching — e.g. FastImage); lazy-load
✓ Reduce app startup time and bundle size; use Hermes (optimized JS engine)
✓ PROFILE to find bottlenecks (Flipper, performance monitor, React DevTools profiler)
✓ Test on lower-end devices (not just high-end)
```

## Por que isso importa

Compreender a otimização de desempenho do React Native é um conhecimento valioso de nível sênior porque **o desempenho suave é essencial para uma boa experiência do usuário**, e o React Native possui considerações de desempenho específicas, então é importante para construir aplicativos de qualidade.

Como React para web, uma preocupação-chave é **minimizar re-renders desnecessários** (usando React.memo, useMemo, useCallback, chaves estáveis e estrutura de estado apropriada para evitar re-renderizar componentes desnecessariamente) — um problema comum de desempenho em aplicativos React Native. **Listas eficientes** são críticas: usar **FlatList** (não ScrollView + map) para listas longas com otimização apropriada (keyExtractor, getItemLayout, componentes de item leves e memoizados), e usar **FlashList** para listas muito grandes — já que listas são comuns e as mal renderizadas causam problemas reais de desempenho.

Compreender as considerações da **thread JS e bridge** é particularmente importante e específico do React Native: a **thread JS deve permanecer livre** para responsividade (trabalho síncrono pesado causa jank), o **tráfego da bridge** (na arquitetura antiga) é custoso, então a comunicação JS↔nativa deve ser minimizada (a nova arquitetura/JSI reduz isso), e crucialmente as **animações devem rodar na thread nativa** (via useNativeDriver/Reanimated, não na thread JS) para suavidade — estas refletem a arquitetura única JS/nativa do React Native e suas implicações de desempenho.

Outras otimizações (otimização de imagem com cache, redução de tamanho de startup/bundle, uso de Hermes, profile para encontrar gargalos e teste em dispositivos de baixo desempenho) completam o toolkit.

O desempenho suave afeta diretamente a UX, e a arquitetura do React Native introduz considerações específicas (thread JS, bridge, animações na thread nativa) além da otimização geral do React.

Já que o desempenho suave é essencial para UX e o React Native possui considerações de desempenho específicas (re-renders, listas eficientes, a thread JS/bridge, animações na thread nativa), e já que a otimização apropriada abordando essas mantém aplicativos suaves, compreender a otimização de desempenho do React Native é um conhecimento valioso de nível sênior para construir aplicativos responsivos e polidos — uma habilidade-chave que reflete tanto a otimização do React (re-renders, listas) quanto as preocupações específicas do React Native (thread JS, bridge, animações nativas), importante para a consciência de desempenho esperada de desenvolvedores React Native sênior.