Svelte 11: $state a Fondo
easy⏱ 5 mincoursesvelte
Reactividad profunda vía Proxy
Envolver un objeto o array literal en $state(...) no solo hace reactivo el binding de nivel superior — Svelte también envuelve en proxy cada objeto y array anidado. Leer team.players[0].goals dentro del markup registra una dependencia sobre ESA propiedad exacta, y escribirla (player.goals++) notifica solo a las partes de la UI que la leen. Esto es fundamentalmente distinto de useState en React, donde debés tratar el estado como inmutable y reemplazar objetos/arrays enteros para disparar un re-render.
<script>
let user = $state({ name: 'Ava', prefs: { theme: 'dark' } });
function rename() {
user.name = 'Nova'; // direct mutation — tracked!
}
function toggleTheme() {
user.prefs.theme = user.prefs.theme === 'dark' ? 'light' : 'dark'; // nested mutation — also tracked!
}
</script>
Arrays: push, splice y escritura por índice funcionan
Como el array en sí es un proxy reactivo, los métodos mutantes como push, pop, splice, sort y la asignación directa por índice (items[i] = ...) se rastrean todos — Svelte no necesita que reasignes items = [...items, x] como suelen exigir los sistemas de reactividad vanilla JS. La reasignación también sigue funcionando (items = [] para vaciar la lista); ambos estilos son válidos, la mutación ya no es algo a evitar.
<script>
let items = $state([1, 2, 3]);
function add() { items.push(items.length + 1); } // tracked
function clear() { items = []; } // reassignment also tracked
</script>
La reactividad profunda tiene un costo — conocé $state.raw
Envolver en proxy cada nivel anidado no es gratis: para un objeto enorme o muy anidado que no necesitás mutar de a poco (por ejemplo datos que se obtienen una vez y se reemplazan por completo), $state.raw(valor) DESACTIVA la reactividad profunda — solo reasignar la variable de nivel superior dispara actualizaciones, las mutaciones a sus propiedades anidadas se ignoran silenciosamente. No lo vas a necesitar seguido, pero es la herramienta correcta cuando manejás datos grandes de solo lectura mayormente.