Svelte 14: $effect.pre y el Momento de los Efectos
easy⏱ 5 mincoursesvelte
Dos momentos, un mismo motor de rastreo de dependencias
$effect.pre y $effect se rastrean exactamente igual — leé un valor $state/$derived dentro de cualquiera de los dos y se vuelve una dependencia. La ÚNICA diferencia es CUÁNDO Svelte llama al callback en relación a su propia actualización del DOM: $effect.pre corre sincrónicamente justo antes del parche al DOM, el $effect normal corre después (asincrónicamente, agrupado con otros efectos).
<script>
let count = $state(0);
$effect.pre(() => {
console.log('about to update DOM, count is', count);
});
$effect(() => {
console.log('DOM already updated, count is', count);
});
</script>
Auto-scroll solo si el usuario ya estaba abajo del todo
En el chat de abajo, $effect.pre lee scrollHeight/scrollTop/clientHeight del contenedor ANTES de que se pinte el mensaje nuevo, para calcular si el usuario estaba scrolleado hasta el final. Después de que el DOM se actualiza, un $effect normal usa esa bandera guardada para bajar el scroll de un salto — pero solo si no había subido a leer el historial. Invertir el orden (chequear la posición de scroll en un $effect normal) siempre mediría DESPUÉS de que el mensaje nuevo ya movió el layout, dando la respuesta incorrecta.
Recurrí a $effect.pre pocas veces, y a propósito
La mayoría de los efectos secundarios realmente no les importa el timing pre- vs post-DOM, así que el $effect normal cubre la gran mayoría del código real. Reservá $effect.pre para el caso puntual en el que necesitás leer una medición del DOM que la próxima actualización está por invalidar — posición de scroll, estado de foco, o tamaño de un elemento medido justo antes de un re-render.