Cansou de escrever React? Svelte 5 reduz o código pela metade e dobra o desempenho

Por que voltei a aprender um framework novo

Quando abri a documentação oficial do Svelte, minha primeira reação foi resistir. A cada poucos anos aparece um novo framework dizendo que “agora é diferente”, mas muitas vezes muda-se a embalagem e o problema continua o mesmo. Se o projeto em React funciona bem, por que mexer nele?

Então vi o primeiro exemplo de código e parei. Em um componente contador, React exige useState, setCount e ainda lembra você de que não pode alterar o state diretamente. E no Svelte? let count = $state(0) e depois apenas count++. Só isso?

Essa sensação de que “menos é mais” me fez passar três horas seguidas no tutorial. Não porque fosse complexo, mas justamente porque era simples demais. Se você também sente “fadiga de frameworks”, este artigo explica a ideia de otimização em tempo de compilação por trás do Svelte 5 — uma abordagem que mudou a forma como penso sobre frameworks frontend.

O que é Svelte? A essência de um framework de compilação

Vamos começar com uma analogia simples para entender a diferença entre tempo de compilação e tempo de execução:

React é como pedir comida por delivery: cada entrega vem com talheres, guardanapos, embalagem e até sacola plástica. Esses itens — Virtual DOM e algoritmo de reconciliation — precisam acompanhar a aplicação em tempo de execução, mesmo que você quase não os use. Por isso, o pacote base do React tem 42 KB até para um simples “Hello World”.

Svelte é como cozinhar em casa: você prepara os ingredientes, isto é, escreve o código; cozinha, ou compila; e serve apenas o prato pronto, o JavaScript nativo, sem peso extra. O bundle final pode ter só 1,6 KB.

Pode parecer exagero, mas meus testes confirmaram a diferença. Criei o mesmo aplicativo Todo em React e em Svelte e comparei o bundle final:

A diferença fica ainda mais clara no primeiro carregamento. Em uma rede 3G — e muitos usuários ainda dependem dela —, 300 ms podem parecer pouco. Em uma página inicial de e-commerce ou de notícias, porém, essa diferença pode representar uma variação de 5% a 10% na taxa de rejeição.

E o que o Svelte 5 melhorou em relação ao Svelte 4? O ponto central é o sistema Runes, uma nova API de reatividade. O bundle ficou mais 15% a 30% menor, e a legibilidade do código também melhorou.

Isso não significa que você deva reescrever seu projeto React agora. Svelte não é um substituto direto do React; eles representam filosofias diferentes. React diz: “Uso um ecossistema poderoso e flexível para cobrir todo tipo de necessidade”. Svelte diz: “Priorizo desempenho extremo e simplicidade para fazer muito bem uma tarefa”. Qual escolher? Depende do cenário.

Sistema Runes em detalhes: a magia do compilador

Runes é o principal recurso do Svelte 5. O nome lembra um sistema de runas de algum jogo, mas a experiência de uso é realmente boa.

Alibaba Cloud - Escolha dos desenvolvedores, 15% de desconto exclusivo em Lighthouse

Ganhar 15% off →Anúncio

$state: finalmente sem setters

Primeiro, veja como fica em React:

// Em React: é preciso lembrar de usar o setter
const [count, setCount] = useState(0)
function increment() {
  setCount(count + 1) // E ainda há o risco de armadilhas de closure
}

Agora compare com o Svelte 5:

// Em Svelte 5: parece JavaScript nativo
let count = $state(0)
function increment() {
  count++ // Simples assim; o compilador cuida da reatividade
}

Na primeira vez que usei $state, procurei instintivamente pelo setter. Depois percebi que ele simplesmente não existe. Por trás dessa “mágica”, o compilador faz o trabalho pesado: analisa o código durante a compilação e insere automaticamente o rastreamento de dependências e a lógica de atualização.

Em projetos reais, isso reduziu meu volume de código em 30% a 40%. A diferença aparece especialmente em formulários, porque não é preciso escrever várias funções handleXXXChange.

$derived: dependências automáticas, sem arrays manuais

Quem já usou useMemo provavelmente sofreu com arrays de dependências. Esqueceu uma dependência? O componente não atualiza. Adicionou dependências demais? O cálculo roda sem parar.

Com $derived, o Svelte resolve isso automaticamente:

// Em React: gerenciamento manual do array de dependências
const doubled = useMemo(() => count * 2, [count])
const quadrupled = useMemo(() => doubled * 2, [doubled])
// Em Svelte 5: o compilador rastreia tudo automaticamente
let doubled = $derived(count * 2)
let quadrupled = $derived(doubled * 2)

Isso é muito útil em cálculos complexos de formulários. Em um sistema de orçamentos que desenvolvi, o preço final dependia de mais de dez campos. Na versão em React, o array de dependências ocupava duas linhas e eu precisava conferir o tempo todo se algum campo havia ficado de fora. Na versão em Svelte, o compilador cuidou de tudo.

Em termos simples: você escreve a lógica do cálculo e deixa as atualizações reativas para o compilador.

$effect: uma forma elegante de gerenciar efeitos colaterais

useEffect talvez seja uma das APIs mais difíceis de entender nos Hooks do React. Array de dependências, função de cleanup, momento da execução — é comum que iniciantes confundam tudo isso.

O $effect do Svelte é mais direto:

// Em React: é preciso retornar uma função de cleanup
useEffect(() => {
  const subscription = someAPI.subscribe()
  return () => {
    subscription.unsubscribe() // Não esqueça de limpar
  }
}, [/* o array de dependências aparece de novo */])
// Em Svelte 5: o compilador cuida da limpeza
$effect(() => {
  const subscription = someAPI.subscribe()
  // A limpeza ocorre quando o componente é desmontado, sem return manual
})

Em projetos reais, usei $effect para polling de API, conexões WebSocket e sincronização com armazenamento local. A experiência foi fluida, e o melhor é não precisar se preocupar tanto com vazamentos de memória: o compilador garante a lógica de limpeza.

$props: propriedades de componente com segurança de tipos

Talvez seja a mudança menos chamativa, mas é muito agradável no uso diário:

// Em React
function TodoItem({ todo, onToggle }) {
  // PropTypes ou anotações manuais de TypeScript são necessários
}
// Em Svelte 5: desestruture os props diretamente
<script>
  let { todo, onToggle } = $props()
  // O suporte a TypeScript é integrado
</script>

A diferença visual parece pequena, mas a escrita fica natural. Além disso, o suporte a TypeScript é oficial e integrado, sem configuração adicional.

Svelte vs. React/Vue: não é uma disputa, é uma escolha

Neste ponto, você talvez esteja se perguntando se deveria migrar para Svelte.

Não transforme a comparação em uma guerra de frameworks. Já vi projetos elegantes em jQuery e código confuso em React. Frameworks são ferramentas; o que realmente importa são as necessidades da equipe e do projeto.

Comparando as curvas de aprendizado

Svelte: HTML + CSS + JS, mais próximo dos padrões da Web. Já acompanhei uma pessoa recém-formada que, depois de estudar o tutorial oficial do Svelte, conseguiu criar componentes de forma independente em dois dias.

React: JSX, regras de Hooks, imutabilidade de estado, princípios de reconciliation… Entender React de verdade exige pelo menos uma ou duas semanas de estudo intensivo. A quantidade de artigos sobre “truques de React que você talvez não conheça” mostra como o assunto é profundo.

KiloClaw - OpenClaw gerenciado para empresas: orquestração de agentes IA e roteamento inteligente

Começar →Anúncio

Vue: fica entre os dois. A sintaxe de templates é mais intuitiva que JSX, mas o framework também tem conceitos próprios, como diretivas, computed e watch.

Desempenho

É importante ser honesto: em projetos pequenos, a diferença de desempenho quase não aparece. O usuário não percebe se seu aplicativo Todo foi feito em React ou Svelte.

Mas a vantagem fica clara nos seguintes cenários:

1. Renderização de listas extensas: catálogos de e-commerce e mensagens de chat em tempo real. Em meu teste com 10.000 itens, Svelte manteve 58 FPS e React ficou em 45 FPS.
2. Atualizações frequentes de estado: painéis em tempo real e cotações de ações. A atualização direta do Svelte é mais rápida que o diff do Virtual DOM.
3. Redes móveis lentas: aqui, um bundle pequeno faz toda a diferença.

Os dados vêm do benchmark mais recente de frameworks JavaScript de 2025, em ambientes padronizados. Mesmo assim, cada projeto deve ser medido em condições reais.

Ecossistema: maturidade vs. simplicidade

Sem rodeios: o ecossistema do Svelte realmente não alcança o do React.

• Downloads semanais no npm: 500 mil do Svelte vs. 20 milhões do React
• Perguntas no Stack Overflow: 12 mil do Svelte vs. 500 mil do React
• Bibliotecas de componentes de terceiros: React tem centenas; Svelte talvez tenha apenas algumas dezenas

Isso não é necessariamente ruim. A comunidade Svelte é pequena, mas muito ativa. Ao fazer uma pergunta no Discord, você pode até receber uma resposta de Rich Harris, criador do Svelte. Esse nível de proximidade é muito mais raro na comunidade React.

A cadeia de ferramentas do Svelte também é moderna: suporte nativo do Vite, SvelteKit como framework full stack oficial e TypeScript integrado. Não é preciso configurar vários loaders do Webpack como em muitos projetos React.

Quando escolher Svelte?

Montei uma matriz de decisão simples:

Se sua equipe já usa React intensamente, não recomendo trocar sem um problema sério de desempenho. Mas, para um projeto novo, uma equipe pequena ou apenas para experimentar algo diferente, Svelte é uma excelente opção.

Prática de 30 minutos: criando um aplicativo Todo com Svelte 5

Chega de teoria. Vamos criar um aplicativo Todo do zero e, no processo, experimentar o sistema Runes.

Estrutura do projeto

svelte-todo/
├── src/
│   ├── lib/
│   │   └── TodoItem.svelte  // Componente de um item Todo
│   ├── App.svelte           // Aplicativo principal
│   └── main.js              // Ponto de entrada
└── package.json

Código principal: App.svelte

<script>
  // O apelo de Runes: simples e poderoso
  let todos = $state([])
  let input = $state('')
  // $derived acompanha as alterações de todos sem dependências manuais
  let remaining = $derived(
    todos.filter(t => !t.done).length
  )
  // Adicione um Todo como em JavaScript comum
  function addTodo() {
    if (input.trim()) {
      todos.push({
        id: Date.now(),
        text: input,
        done: false
      })
      input = '' // Atualização reativa: a interface é renovada automaticamente
    }
  }
  // Alterne o status de conclusão
  function toggleTodo(id) {
    const todo = todos.find(t => t.id === id)
    if (todo) {
      todo.done = !todo.done // Altere diretamente; é simples assim
    }
  }
  // Exclua um Todo
  function deleteTodo(id) {
    todos = todos.filter(t => t.id !== id)
  }
</script>
<!-- O template Svelte é HTML, não JSX -->
<div class="app">
  <h1>Minhas tarefas</h1>
  <div class="input-area">
    <input
      bind:value={input}
      placeholder="Adicionar nova tarefa..."
      onkeydown={(e) => e.key === 'Enter' && addTodo()}
    />
    <button onclick={addTodo}>Adicionar</button>
  </div>
  <!-- Quantas tarefas restam? $derived atualiza automaticamente -->
  <p class="stats">
    Restam {remaining} tarefas
  </p>
  <ul class="todo-list">
    {#each todos as todo}
      <TodoItem
        {todo}
        onToggle={() => toggleTodo(todo.id)}
        onDelete={() => deleteTodo(todo.id)}
      />
    {/each}
  </ul>
</div>
<!-- Os estilos são scoped por padrão e não afetam o escopo global -->
<style>
  .app {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
  }
  .input-area {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }
  input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  button {
    padding: 10px 20px;
    background: #0066cc;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .stats {
    color: #666;
    margin-bottom: 10px;
  }
  .todo-list {
    list-style: none;
    padding: 0;
  }
</style>

Componente filho: TodoItem.svelte

<script>
  // Desestruture com $props os dados recebidos do componente pai
  let { todo, onToggle, onDelete } = $props()
</script>
<li class="todo-item">
  <label>
    <input
      type="checkbox"
      checked={todo.done}
      onchange={onToggle}
    />
    <span class:done={todo.done}>
      {todo.text}
    </span>
  </label>
  <button class="delete-btn" onclick={onDelete}>
    Excluir
  </button>
</li>
<style>
  .todo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
  }
  label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
  }
  /* class:done é um recurso de sintaxe do Svelte */
  .done {
    text-decoration: line-through;
    color: #999;
  }
  .delete-btn {
    padding: 5px 10px;
    background: #ff4444;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
  }
</style>

Executando o projeto

npm create vite@latest svelte-todo -- --template svelte
cd svelte-todo
npm install
npm run dev

Acesse http://localhost:5173 e você verá um aplicativo Todo funcional.

Pontos principais

Este pequeno projeto demonstra algumas vantagens centrais do Svelte:

1. Reatividade natural: sem setState nem dispatch; quando os dados mudam, a interface é atualizada automaticamente.
2. Sem biblioteca de gerenciamento de estado: não usamos Redux nem Context, mas o estado continua claro. Para projetos pequenos e médios, isso costuma ser suficiente.
3. Isolamento de estilos: o CSS pertence ao componente por padrão e não interfere em outros componentes.
4. Build muito pequeno: execute npm run build e confira; o resultado final fica em torno de 5 KB.

Há um detalhe que me confundiu na primeira vez. No Svelte 4, depois de todos.push(), era preciso fazer uma nova atribuição para disparar uma atualização. O Svelte 5 resolveu isso: basta usar push. Essa é uma diferença importante em relação ao Svelte 4.

Não se deixe enganar pela simplicidade: projetos complexos ainda exigem uma arquitetura bem planejada. A vantagem é que, no Svelte, você pode concentrar mais energia na lógica de negócio e menos nas convenções de gerenciamento de estado.

Ecossistema, comunidade e futuro

Cenário atual do ecossistema

Como vimos, o ecossistema é menor que o do React, mas os elementos essenciais estão disponíveis:

Vultr - Servidor cloud NVMe de alto desempenho, 32 locais globais, deploy Docker com um clique

Ver preços →Anúncio

• SvelteKit: framework full stack oficial, equivalente ao papel do Next.js. Oferece SSR, SSG e rotas de API.
• Bibliotecas de componentes: Svelte Material UI, Carbon Components, Skeleton UI e outras.
• Cadeia de ferramentas: suporte nativo do Vite, além de Prettier e plugins completos do ESLint.
• Casos reais de adoção: ferramentas internas do Spotify, painel de gestão de lojistas da Square, gráficos interativos do The New York Times e alguns projetos internos da Apple.

A comunidade realmente é menor que a do React, mas é muito ativa. No Discord, é comum ver Rich Harris e outros membros da equipe principal discutindo problemas e aceitando sugestões. Esse nível de proximidade é difícil de encontrar em frameworks maiores.

Recursos para aprender

• Tutorial oficial: é interativo; ao concluir os exercícios, você entende cerca de 80% dos conceitos.
• Discord da comunidade Svelte: as perguntas recebem respostas rápidas e de boa qualidade.
• Projetos de exemplo no GitHub: o repositório oficial reúne muitos casos práticos.
• Recursos em chinês: Juejin e Zhihu já têm vários artigos de qualidade.

Tendências para o futuro

Minha avaliação pessoal é: Svelte provavelmente não será o framework dominante, mas continuará sendo uma opção importante.

O motivo é simples: a vantagem do ecossistema React é grande demais, e projetos corporativos não mudam facilmente. Ainda assim, Svelte tem espaço nestas áreas:

1. Projetos sensíveis a desempenho: interfaces de jogos, painéis de dados em tempo real e aplicativos móveis.
2. Desenvolvimento rápido por equipes pequenas: startups, projetos pessoais e ferramentas internas.
3. Educação e aprendizado: a simplicidade do Svelte faz dele uma boa porta de entrada para desenvolvimento frontend.

A estabilidade do Svelte 5 já foi comprovada, e o suporte a TypeScript continua evoluindo. Ele pode ser usado em produção com confiança.

Aprender Svelte talvez não valorize muito seu currículo, mas amplia sua forma de pensar. Depois de entender a otimização em tempo de compilação, você volta ao React com uma compreensão mais profunda de desempenho.

Conclusão: vale a pena experimentar

Depois de tudo isso, a mensagem é simples: vale a pena dedicar um fim de semana ao Svelte.

Não estou sugerindo que você reescreva todos os projetos imediatamente. Minha recomendação é:

1. Passe duas horas no tutorial oficial neste fim de semana: ele é interativo e divertido.
2. Reescreva um projeto pequeno com Svelte: pode ser uma calculadora, um aplicativo de clima ou algo que você já tenha criado.
3. Não tente adotá-lo na equipe imediatamente: primeiro ganhe familiaridade e confirme se o framework atende ao contexto de vocês.

O desenvolvimento frontend muda todos os dias, e cada framework se apresenta como “revolucionário”. O que realmente vale a pena aprender são as ideias por trás dessas ferramentas. A otimização em tempo de compilação do Svelte, o design enxuto da API e a busca por desempenho extremo são princípios úteis em qualquer framework.

Para ser franco: a tecnologia deve servir ao produto, e não o contrário. Um problema resolvido pelo React provavelmente também pode ser resolvido pelo Svelte. Qual escolher? Observe a equipe, o cenário e sua própria intuição.

Se você realmente se importa com desempenho, está cansado de escrever código repetitivo ou apenas quer testar algo novo, abra https://svelte.dev/tutorial e siga o tutorial.

São apenas duas horas. No pior caso, você gasta o equivalente ao tempo de uma refeição por delivery. Mas talvez descubra uma ferramenta que realmente combina com você.