Svelte vs React: os mesmos componentes escritos nos dois | We.Inc
Compare Svelte 5 e React com o mesmo contador, lista, formulário e effect escritos em cada um. Veja como runes diferem de hooks e qual combina com o seu próximo projeto.
Svelte é um compilador: ele transforma arquivos .svelte em JavaScript simples, e o state declarado com a rune $state atualiza a página diretamente. React é uma biblioteca em que a função do componente roda de novo a cada mudança de state e devolve um novo JSX. Svelte costuma significar menos código por componente; React traz o ecossistema maior e mais profissionais disponíveis para contratar.
Svelte 5 e React em resumo
Tema
Svelte 5
React
Como é entregue
Um compilador transforma componentes em JavaScript
Biblioteca carregada no navegador
O código do componente roda
Uma vez, quando o componente é criado
De novo a cada re-render
State local
let count = $state(0)
const [count, setCount] = useState(0)
Valor calculado
$derived(expression)
Expressão simples no corpo do render
Efeitos colaterais
$effect, com dependências rastreadas por você
useEffect com um array de dependências
Props
let { name } = $props()
Parâmetros da função
Binding bidirecional
bind:value, $bindable para props
value mais onChange
Handler de clique
onclick={...}
onClick={...}
Framework full-stack
SvelteKit
Next.js e outros
Escolha um componente abaixo e leia a versão em Svelte 5 ao lado da versão em React. Os dois fazem exatamente a mesma coisa, então a diferença que você vê é só o framework. Cada trecho está completo e roda como está em um projeto novo.
Escolha um dos quatro componentes: contador, lista, formulário ou effect.
Leia o arquivo Svelte à esquerda e o arquivo React à direita.
Confira a nota para ver qual regra de cada framework o exemplo mostra.
Copie qualquer uma das versões para um projeto novo para testar.
No Svelte, altere diretamente arrays e objetos guardados em $state. No React, sempre passe um novo array ou objeto para o setter.
Não use $effect para manter dois valores sincronizados. Um valor $derived é a resposta do Svelte, assim como o React sugere calculá-lo durante o render.
Se o seu time já conhece React, o argumento de contratação e de bibliotecas costuma pesar mais que os componentes menores do Svelte.
Teste uma pequena página interna em Svelte antes de uma migração completa. Usar os dois juntos em um app é possível, mas raramente vale a pena.
Perguntas frequentes
Svelte é mais rápido que React?
Não citamos números de velocidade aqui porque os resultados dependem do app e do teste. A diferença estrutural é real: o Svelte elimina na compilação a camada do framework e atualiza só o que mudou, enquanto o React roda os componentes de novo e compara o resultado.
O Svelte 5 ainda usa let para state reativo?
Não sozinho. No Svelte 4, um let no nível superior era reativo por padrão. O Svelte 5 deixa isso explícito: uma variável se torna reativa quando você a cria com $state.
Qual é a versão Svelte do Next.js?
SvelteKit. A documentação do Svelte o chama de framework de aplicação complementar, e ele acrescenta roteamento, renderização no servidor e carregamento de dados aos componentes Svelte.
Posso usar bibliotecas React no Svelte?
Não diretamente. Componentes React precisam do React para renderizar. Bibliotecas JavaScript simples sem camada de interface, como utilitários de data ou de validação, funcionam nos dois.
Qual um iniciante deve aprender primeiro?
Os templates do Svelte são mais próximos do HTML simples, então os primeiros passos são mais suaves. O React tem muito mais tutoriais e vagas de emprego. Se o objetivo é conseguir emprego, comece pelo React.
Runes versus hooks
O Svelte 5 substituiu a antiga reatividade implícita por runes: $state, $derived, $effect, $props e $bindable. Elas parecem chamadas de função, mas são palavras-chave do compilador, então o compilador consegue ligar cada valor às partes da página que o leem.
Os hooks do React são funções comuns que precisam ser chamadas no nível superior de um componente, na mesma ordem a cada render. useState dá um snapshot do valor e um setter, e o novo valor só aparece no próximo render.
Effects e dependências
Um $effect do Svelte rastreia todo state que ele lê de forma síncrona e roda de novo quando esse state muda. Valores lidos depois de um await não são rastreados. O React pede que você liste cada valor reativo no array de dependências do useEffect, e o linter dele avisa quando falta algum.
Os dois rodam só no navegador, nunca durante a renderização no servidor, e os dois aceitam uma função de limpeza retornada, que roda antes da próxima execução e na desmontagem.
Quando cada um se encaixa
Escolha Svelte para sites de conteúdo, widgets e times pequenos que querem menos código e se contentam com um catálogo menor de bibliotecas. Escolha React quando precisar de uma biblioteca React específica, tiver um time grande ou usar um framework como o Next.js, em torno do qual a sua hospedagem foi construída.
Comece um projeto em cada um
Comandos de scaffold
O primeiro comando cria um app SvelteKit com a ferramenta oficial sv; o segundo cria um app Next.js, o framework React com mais documentação.
Contador
O Svelte deixa você escrever count++ porque $state torna a variável reativa. O React precisa do setter, e o novo valor aparece no próximo render.
Lista
Arrays em $state são proxies com reatividade profunda, então push atualiza a página. O React trata o state como somente leitura: copie o array e passe a cópia para o setter.
Formulário
bind:value mantém o input e a variável sincronizados nos dois sentidos. O React usa um input controlado: value vem do state e onChange o grava de volta.
Effect
O Svelte descobre que o effect lê count. O React precisa de count no array de dependências, senão o título pararia de atualizar.