Estratégias de performance no React Native

Problema

Scroll travando em listas, re-renders em cascata ao atualizar contexto global e animações na JS thread competindo com fetch pesado.

Solução

Medir com Flipper/React DevTools e why-did-you-render em staging. Priorizar: lista virtualizada, estado local, useMemo/useCallback cirúrgicos, React.memo em item de lista. Animações: Reanimated na UI thread quando necessário.

Arquitetura

• Dados: TanStack Query com staleTime adequado; prefetch de próxima página.
• Navegação: lazy de telas pesadas quando o bundler permitir.
• Imagens: cache e dimensões fixas para evitar layout thrash.

Código

import { FlashList } from "@shopify/flash-list";
import { memo } from "react";
 
const Row = memo(function Row({ title }: { title: string }) {
  return <Text>{title}</Text>;
});
 
export function Feed({ data }: { data: string[] }) {
  return (
    <FlashList
      data={data}
      estimatedItemSize={56}
      renderItem={({ item }) => <Row title={item} />}
    />
  );
}

Performance

Evitar inline functions no renderItem sem memo no child; não colocar console.log em produção; profile release builds (Hermes).

Melhorias futuras

Fabric + novo renderer; isolamento de módulos nativos pesados; bundle analysis.

Conclusão

Performance em RN é thread model + listas + dados. Artigo objetivo comunica experiência real de app, não só tutorial de Hello World.