Esse framework de 5 KB está tirando o sono do React — descubra por quê

Preact vs React

Quando pensamos em interfaces ricas, React costuma ser o padrão‑ouro. Mas, nos últimos meses, um micro‑framework de pouco mais de 5 KB — o Preact (4,2 KB GZIP, ~ 9,5 KB minificado) — tem aparecido em talk shows de conferências, bate‑papos de comunidades e, principalmente, nos relatórios de bundle analysis. A pergunta que não quer calar é: por que um projeto tão minúsculo está preocupando a gigante de 40+ KB?

Spoiler: não se trata apenas de peso de arquivo; o “efeito Pre‑compression” impacta performance, DX e até a conta do seu CDN.

---

O peso importa (muito) nesse framework de 5kb — mas não é tudo

Quando se fala em Preact vs React, o que realmente importa? Bundle size ainda é o primeiro argumento que você escuta. E faz sentido:

Lib	Tamanho GZIP	First Input Delay (média¹)
Preact	≈ 4,2 KB	23 ms
React + DOM	42‑45 KB	46 ms

¹ Dados de laboratório em uma simulação 4G “Slow 3G” (Lighthouse).

Para usuários em planos pré‑pago, 1 MB pode custar ~ R$ 0,06. Parece pouco, mas em larga escala (e com câmbio em alta) pode significar mais churn‑de‑rede do que você imagina. Um bundle 10× menor entra nos 100 ms mágicos que a Google Performance Handbook sugere para manter o Time to Interactive saudável.

Da teoria à prática: um teste de fogo com Preact vs React

Quando eu comecei a migrar alguns componentes cabulosos do meu projeto para Preact vs React, a primeira coisa que me chamou atenção foi o tamanho do bundle gerado. No build de produção, o pacote final com Preact ficou pouco acima de 4 KB gzip, enquanto a mesma funcionalidade em React passava dos 40 KB. Essa redução brutal refletiu direto nos meus Core Web Vitals: o First Input Delay caiu quase pela metade e o Time to Interactive ficou mais estável em conexões 3G reais. Na prática, percebi que o trade‑off de API — ter que importar preact/compat e lidar com algumas diferenças sutis no contexto — foi irrelevante perto do ganho de performance e da economia que fiz no CDN.

Por outro lado, a comparação Preact vs React não é só sobre peso de arquivo. Depois de algumas semanas rodando ambos em produção, em minhas pesquisas, notei que a ecosfera de Preact ainda não alcança o mesmo nível de tooling e suporte que o React tem com Next.js, Remix e a infinidade de bibliotecas de UI. Mesmo assim, para widgets isolados, PWAs leves ou projetos onde cada milissegundo conta, Preact provou ser uma solução enxuta e robusta. Hoje mantenho uma arquitetura híbrida: React para as telas mais complexas e Preact onde a entrega rápida e o SEO são prioridade — um equilíbrio que tem trazido o melhor dos dois mundos ao meu fluxo de trabalho.

---

Compatibilidade quase drop‑in

A maior dor ao migrar frameworks é reescrever componentes. Preact expõe praticamente a mesma API de React (useState, useEffect, useMemo, etc.). Na prática, você troca:

npm i preact

e, em Vite, adiciona:

// vite.config.jsimport { defineConfig } from 'vite'

import preact from '@preact/preset-vite'

export default defineConfig({

  plugins: [preact()],

})

Para muitos projetos, isso “simplesmente funciona”. Até bibliotecas populares, como Redux Toolkit ou React Router v6, já mantêm peer dependencies compatíveis.

---

Menos bytes = mais bateria (e ranking)

Cada byte baixado precisa ser:

1. Transferido via rede
   
2. Descompactado na CPU
   
3. Parseado + Executado no motor JS
   

Em smartphones de entrada, esses passos custam de 3 × 5 mA até 8 × 12 mA. O Chrome UX Report já sinaliza sites que consomem bateria demais. E, adivinhe, o Core Web Vitals premia páginas que terminam trabalho JS rapidamente. Resultado: SEO indireto e melhor pontuação no Lighthouse, fatores cada vez mais correlacionados a ranking orgânico.

Veja também: Bibliotecas de Código Open Source que Você Precisa Conhecer

---

“Islands of Interactivity” sem dor

A nova onda de meta‑frameworks (Astro, Fresh, Slinkity) usa “ilhas”: apenas as partes dinâmicas do HTML recebem JS. Preact virou o motor default dessa estratégia porque:

• Carrega rápido (ótimo para hydrates on demand)
  
• Tem Componentes Funcionais puros, sem class components legados
  
• Dispensa runtime reconciliation pesado: o diff virtual é micro‑otimizado
  

Isso significa SSG + hidratação parcial sem runtime inchado.

---

DX turbinada com Sigilo Alpha: Signals

Em 2023, o time do Preact apresentou o Signals (estado reativo ultraleve). Ao invés de useState, você faz:

import { signal } from '@preact/signals'
const counter = signal(0)
function Button() {
  return (
    <button onClick={() => counter.value++}>
      {counter.value}
    </button>
  )
}

• Nenhum hook sujeito a rules‑of‑hooks
  
• Re‑render granular: só o nó que usa counter.value atualiza
  
• Zero teardown — menos GC.
  

Várias discussões na RFC do React “Signals/Effects” citam o Preact como prova concreta de que o modelo é viável.

---

Casos de uso onde o ele brilha

1. Widgets embutidos (chat, embeds, checkout buttons)
   
2. E‑commerce headless — páginas PLP/PD com SSR e hydration seletiva
   
3. Dashboards de IoT em single‑board computers (Raspberry Pi)
   
4. Páginas AMP‑like que precisam de “pílulas” interativas
   
5. Qualquer PWA que almeje offline robusto com Service Worker (menos bytes no cache).
   

---

Limitações que você precisa conhecer

• Ecossistema menor — há wrappers para quase tudo, mas nem sempre na mesma maturidade.
  
• DevTools — apesar do ótimo Preact DevTools, a maioria dos tutoriais de terceiros continua abordando React.
  
• Edge cases — libs que acessam internamente React.Children ou React.PureComponent podem quebrar (mas existe preact/compat).
  

---

Vale a troca? Uma checklist rápida entre Preact vs React

Critério	React	Preact
Bundle inicial	40 KB	4 KB
API “familiar” (JSX, Hooks)	✔️	✔️
Ecossistema (UI libs, docs, tutoriais)	👑	🐣
SSR + stream hydration	⚙️ via Next	⚙️ via preact‑passage
Learning curve para React dev	—	mínima
Edge cases (3rd‑party libs dependentes)	—	⚠️ alguns

Se seu projeto é greenfield ou o bundle budget está apertado, o ROI é fácil de justificar. Em sistemas legados, migre gradualmente: use react em features antigas e Preact nas novas rotas (code‑split por import()).

---

Comece agora — em 3 comandos

npx create-vite@latest my-app --template preact
cd my-app
npm run dev

Abra localhost:5173 e observe o Chrome DevTools > Network: JS total < 10 KB. Difícil não sorrir.

---

Conclusão

O “framework de 5 KB” não vai aposentar o React amanhã, mas obriga a comunidade a repensar excesso de runtime. Preact mostra que é possível manter a ergonomia do ecossistema mais amado do front‑end sem sacrificar velocidade — e, de quebra, melhorar métricas de SEO, CPU e bateria.Se você ainda acha que “uns KBytes não fazem diferença”, experimente abrir a mesma SPA em um Moto E de 2018 numa rede 3G. Depois conte nos comentários qual delas “acorda” primeiro. 😉

Então, depois de analisar Preact vs React, qual deles entra no seu próximo projeto?

Veja mais sobre Preact vs React