Svelte vs React: los mismos componentes escritos en ambos | We.Inc
Compara Svelte 5 y React con el mismo contador, lista, formulario y efecto escritos en cada uno. Mira en qué se diferencian las runes de los hooks y cuál encaja con tu próximo proyecto.
Svelte es un compilador: convierte los archivos .svelte en JavaScript plano, y el estado declarado con la rune $state actualiza la página directamente. React es una librería en la que la función del componente se vuelve a ejecutar con cada cambio de estado y devuelve JSX nuevo. Svelte suele implicar menos código por componente; React aporta el ecosistema más grande y más candidatos para contratar.
Svelte 5 y React de un vistazo
Tema
Svelte 5
React
Cómo se distribuye
Un compilador convierte los componentes en JavaScript
Librería cargada en el navegador
El código del componente se ejecuta
Una vez, cuando se crea el componente
De nuevo en cada re-render
Estado local
let count = $state(0)
const [count, setCount] = useState(0)
Valor calculado
$derived(expression)
Expresión simple en el cuerpo del render
Efectos secundarios
$effect, con dependencias rastreadas por ti
useEffect con un array de dependencias
Props
let { name } = $props()
Parámetros de la función
Enlace bidireccional
bind:value, $bindable para props
value más onChange
Manejador de clic
onclick={...}
onClick={...}
Framework full-stack
SvelteKit
Next.js y otros
Elige un componente abajo y lee la versión de Svelte 5 junto a la de React. Las dos hacen exactamente lo mismo, así que la diferencia que ves es solo el framework. Cada fragmento está completo y funciona tal cual en un proyecto nuevo.
Elige uno de los cuatro componentes: contador, lista, formulario o efecto.
Lee el archivo de Svelte a la izquierda y el de React a la derecha.
Revisa la nota para ver qué regla de cada framework muestra el ejemplo.
Copia cualquiera de las dos versiones en un proyecto nuevo para probarla.
En Svelte, modifica directamente los arrays y objetos guardados en $state. En React, pasa siempre un array u objeto nuevo al setter.
No recurras a $effect para mantener dos valores sincronizados. Un valor $derived es la respuesta de Svelte, igual que React sugiere calcularlo durante el render.
Si tu equipo ya conoce React, el argumento de contratación y librerías suele pesar más que unos componentes de Svelte más pequeños.
Prueba una página interna pequeña en Svelte antes de cambiar del todo. Combinar los dos en una misma app es posible, pero rara vez compensa.
Preguntas frecuentes
¿Svelte es más rápido que React?
Aquí no damos cifras de velocidad porque los resultados dependen de la app y de la prueba. La diferencia estructural es real: Svelte elimina en la compilación la capa del framework y actualiza solo lo que cambió, mientras que React vuelve a ejecutar los componentes y compara el resultado.
¿Svelte 5 sigue usando let para el estado reactivo?
No por sí solo. En Svelte 4 un let de nivel superior era reactivo por defecto. Svelte 5 lo hace explícito: una variable pasa a ser reactiva cuando la creas con $state.
¿Cuál es el equivalente de Next.js en Svelte?
SvelteKit. La documentación de Svelte lo describe como su framework de aplicaciones complementario, y añade enrutado, renderizado en servidor y carga de datos sobre los componentes de Svelte.
¿Puedo usar librerías de React en Svelte?
No directamente. Los componentes de React necesitan React para renderizarse. Las librerías de JavaScript sin capa de interfaz, como utilidades de fechas o de validación, funcionan en los dos.
¿Cuál debería aprender primero un principiante?
Las plantillas de Svelte se parecen más al HTML normal, así que los primeros pasos son más suaves. React tiene muchos más tutoriales y ofertas de empleo. Si el objetivo es encontrar trabajo, empieza por React.
Runes frente a hooks
Svelte 5 sustituyó su antigua reactividad implícita por las runes: $state, $derived, $effect, $props y $bindable. Parecen llamadas a funciones pero son palabras clave del compilador, de modo que el compilador puede conectar cada valor con las partes de la página que lo leen.
Los hooks de React son funciones normales que deben invocarse en el nivel superior de un componente, en el mismo orden en cada render. useState te da una instantánea del valor y un setter, y el valor nuevo solo aparece en el siguiente render.
Efectos y dependencias
Un $effect de Svelte rastrea el estado que lee de forma síncrona y se vuelve a ejecutar cuando ese estado cambia. Los valores leídos después de un await no se rastrean. React te pide que enumeres cada valor reactivo en el array de dependencias de useEffect, y su linter avisa cuando falta alguno.
Los dos se ejecutan solo en el navegador, nunca durante el renderizado en servidor, y los dos aceptan una función de limpieza devuelta que se ejecuta antes de la siguiente ejecución y al desmontar.
Cuándo encaja cada uno
Elige Svelte para sitios de contenido, widgets y equipos pequeños que quieren menos código y se conforman con un catálogo de librerías más reducido. Elige React cuando necesites una librería concreta de React, tengas un equipo grande o uses un framework como Next.js en torno al cual está montado tu hosting.
Empieza un proyecto con cada uno
Comandos para crear el proyecto
El primer comando crea una app de SvelteKit con la herramienta oficial sv; el segundo crea una app de Next.js, el framework de React con más documentación.
Contador
Svelte te deja escribir count++ porque $state hace reactiva la variable. React necesita el setter, y el valor nuevo aparece en el siguiente render.
Lista
Los arrays en $state son proxies reactivos en profundidad, así que push actualiza la página. React trata el estado como de solo lectura: copia el array y pasa la copia al setter.
Formulario
bind:value mantiene sincronizados el input y la variable en ambos sentidos. React usa un input controlado: value sale del estado y onChange lo vuelve a escribir.
Efecto
Svelte deduce que el efecto lee count. React necesita count en el array de dependencias, o el título dejaría de actualizarse.