Svelte 52: Rendimiento — Bloques {#key} y $state.raw
easy⏱ 5 mincoursesvelte
{#key} fuerza un remontaje, no solo una actualización
Normalmente Svelte parchea el DOM en el lugar y preserva el estado del componente entre renderizados. Envolver contenido en {#key expresión} cambia eso: cada vez que el valor de expresión cambia (por ===), Svelte destruye la instancia anterior y crea una completamente nueva — su $state se reinicia a los valores iniciales y cualquier transición de entrada se repite.
{#key selectedUserId}
<UserAvatar id={selectedUserId} />
{/key}
<!-- UserAvatar's own internal $state (e.g. a hover/animation flag)
resets every time selectedUserId changes, since it's a fresh instance. -->
$state.raw: renunciar a la reactividad profunda
let obj = $state({...}) crea un proxy profundo de obj, así que mutar obj.nested.value dispara actualizaciones. let obj = $state.raw({...}) NO crea un proxy de los datos anidados — mutar una propiedad no le hace nada silenciosamente a la interfaz. Solo obj = {...nuevoValor} (una reasignación completa) notifica a los suscriptores. Esto evita el costo de crear un proxy profundo de estructuras grandes que rara vez mutas.
let big = $state.raw({ rows: hugeArray });
big.rows.push(newRow); // silently ignored by reactivity — UI won't update
big = { ...big, rows: [...big.rows, newRow] }; // triggers update
Observa cómo el dato raw se atrasa y luego salta
En la demo, haz clic en 'Mutate in place' varias veces — la fila $state profunda se actualiza al instante, pero la fila raw parece congelada. NO está congelada: el objeto se está mutando todo el tiempo. Haz clic una vez en 'Reassign raw' y la fila raw salta al valor acumulado real — prueba de que los datos raw estaban cambiando de forma invisible para Svelte hasta que una reasignación los hizo visibles.