Como deixar apps Expo e React Native mais rápidos na prática

A provocação: seu usuário espera mesmo por você?

Se seu app congela, o usuário desliza o dedo para cima e esquece. Performance não é detalhe. É questão de sobrevivência em React Native, especialmente no Expo. Você sabe mesmo o que trava sua tela?

Lide: Fast é a única opção aceitável

O usuário não perdoa. A diferença entre um app fluido e um app irritante pode ser apenas uma função lenta ou um componente que renderiza sem motivo. E a maioria dos devs não percebe até receber aquela review negativa. Não seja você.

Performance começa nas melhores práticas – e nenhuma é opcional

Tudo que desacelera seu app começa bem antes do primeiro lag. Priorize TypeScript, use recursos estáticos do JS, evite var, prefira const e let, humanize seus imports/exports e ative Slint e análise estática. Siga esse ritual e os bugs já aparecem antes do usuário.

Entenda threads de verdade: o que trava seu app não está onde você pensa

React Native (e Expo) divide tudo entre pelo menos duas threads: a JavaScript (onde roda lógica e estados) e a UI (onde acontece o visual — renderização, touch e animações). Toda lentidão real nasce de travar a thread JS ou de entupir a comunicação entre elas.

O que acontece ao bloquear a thread JS?

Quando a thread JavaScript fica presa (como num loop pesado ou processamento inútil rodando em JS), nem os toques, nem as atualizações visuais acontecem. Imagine toda sua tela congelada por 3 segundos só porque você esqueceu um loop ali. Sim, é isso mesmo.

Como encontrar bottlenecks sem drama

Debug não é só console.log. Ative os DevTools, use o profiler, abra o highlight de updates. Saiba exatamente quais componentes renderizam a cada clique — e quais deveriam ficar intocados.

React Compiler: agora o React turbina seu app por você

A partir do Expo SDK54 e React 19, o novo Compiler do React resolve automaticamente muitos re-renders desnecessários. Você ganha performance e foco em features, não em patch de bug.

Como habilitar e checar o React Compiler

No Expo SDK54 ou superior, o Compiler vem habilitado por padrão. Se quiser forçar ou checar, ajuste react.compiler no seu app.json ou rode o comando de health-check. Veja nos docs a forma exata para o seu caso — priorize sempre que possível.

E se não posso usar o Compiler? O velho memo ainda salva

Se não for possível migrar agora, memoize componentes pesados manualmente com React.memo e cache funções com useCallback. Use sempre que encontrar lags de render ou re-render intempestivo.

O caminho rápido: checklist de performance Expo que funciona

1. Use TypeScript e regras estáticas. 2. Evite var, prefira const e let. 3. Ative Slint e análise estática. 4. Use import/export e evite require. 5. Teste SEMPRE em dispositivo real. 6. Use Profiler e DevTools de verdade. 7. Adote o React Compiler assim que possível. 8. Refatore componentes caros para evitar renders de graça. 9. Use React.memo/useCallback nos gargalos. 10. Abuse de Worklets e Reanimated para animação leve.

Resumo: Código rápido e limpo não é sorte, é processo

Performance vem de disciplina no básico, atenção ao profiler e adoção rápida das novas ferramentas do React. O segredo é simples: não tolere lentidão, use sempre profiler, habilite React Compiler e ataque bottlenecks antes do usuário reclamar.

Perguntas frequentes

Por que «Lide: Fast é a única opção aceitável» aparece como alavanca em Como deixar apps Expo e React Native mais rápidos na prática?

Comece pelo mecanismo descrito: O usuário não perdoa. A diferença entre um app fluido e um app irritante pode ser apenas uma função lenta ou um componente que renderiza sem motivo. E a maioria dos devs não percebe até receber aquela review negativa. Não seja você.

Qual evidência confirma que «Performance começa nas melhores práticas – e nenhuma é opcional» está funcionando?

Use o critério do material: Tudo que desacelera seu app começa bem antes do primeiro lag. Priorize TypeScript, use recursos estáticos do JS, evite var, prefira const e let, humanize seus imports/exports e ative Slint e análise estática. Siga esse ritual e os bugs já aparecem antes do. Se precisar de segundo sinal, Tudo que desacelera seu app começa bem antes do primeiro lag. Priorize TypeScript, use recursos estáticos do JS, evite var, prefira const e let, humanize seus imports/exports e.

Como «Entenda threads de verdade: o que trava seu app não está onde você pensa» se traduz em checklist de operação?

O artigo alerta: React Native (e Expo) divide tudo entre pelo menos duas threads: a JavaScript (onde roda lógica e estados) e a UI (onde acontece o visual — renderização, touch e animações). Toda lentidão real nasce de travar a thread JS ou de entupir a comunicação entre elas. Ajuste ao seu contexto em `how-to-make-expo-apps-faster-e` antes de virar regra.

Quando «O que acontece ao bloquear a thread JS?» deixa de valer o esforço?

Resposta direta do corpo: Quando a thread JavaScript fica presa (como num loop pesado ou processamento inútil rodando em JS), nem os toques, nem as atualizações visuais acontecem. Imagine toda sua tela congelada por 3 segundos só porque você esqueceu um loop ali. Sim, é isso mesmo.

Continue explorando