Como deixar apps Expo e React Native mais rápidos na prática
Depois de aprender isso, seu app Expo nunca mais será o mesmo: entenda threads, debug, React Compiler e multithreading passo a passo.
Por que isso é importante
Expo mais rápido: profile no device — otimismo cego é procrastinação.
Leitura relacionada: Curso React Native · Curso React · Programa CrazyStack · Cursos CrazyStack.
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.
Atenção
Teste SEMPRE seu app em um dispositivo real. Simuladores enganam – seu computador é
mais rápido do que quase todos os celulares reais!
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.
Dica técnica
Nunca rode cálculos ou loops pesados na thread JS. Use animações nativas, Worklets e
repasse trabalhos intensos para soluções off-thread sempre que possível.
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.
Exemplo prático
Se sua animação usa React Native Reanimated, repare: a UI continua suave mesmo com a
thread JS bloqueada. Isso entrega a força do multithreading de verdade — use sempre
que puder.
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.
Atenção
Se mudar um componente pequeno, mas o grande trava todo o app, seu problema é
renderização descontrolada. Cheque no profiler: quem realmente mudou? Evite renderizar
componentes pesados sem necessidade.
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.
Cuidado
Caso esteja em um Expo antigo, siga o guide oficial e considere migrar. O ganho de
performance vale centenas de linhas de otimização manual!
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.
Alternativa avançada
Use worklets com React Native, especialmente para cálculos, animações e interação em
tempo real. Sua interface segue fluida, mesmo que a thread JS apanhe!
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
Continue: Curso React Native · Curso React · Programa CrazyStack · Cursos CrazyStack.
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.
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?
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.
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.