$effect: efectos secundarios
Ejecute efectos secundarios que vuelvan a ejecutarse cada vez que cambien sus dependencias reactivas.
$effect: efectos secundarios es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Runa de efecto secundario
Utilice $effect(() => { ... }) para los efectos secundarios que responden a cambios reactivos.
$effect(() => {
console.log("count is", count);
});Seguimiento automático
Svelte realiza un seguimiento automático de las dependencias dentro del callback.
Función de limpieza
Devuelva una función para realizar la limpieza antes de la siguiente ejecución o al destruirse el componente.
$effect(() => {
const id = setInterval(tick, 1000);
return () => clearInterval(id);
});Se ejecuta después del montaje
El efecto se ejecuta después de montar el componente y cada vez que cambia una dependencia.
Sin SSR
Los callbacks de $effect no se ejecutan durante el SSR. Utilícelos para la lógica exclusiva del navegador.
Efectos antes del montaje
$effect.pre se ejecuta antes de las actualizaciones del DOM; resulta útil para patrones de medir y aplicar.
Efectos raíz
$effect.root crea un efecto fuera del ciclo de vida del componente para casos avanzados.
Comparación con onMount
onMount se ejecuta una vez; $effect vuelve a ejecutarse cuando cambian las dependencias. A menudo, $effect reemplaza tanto onMount como los patrones reactivos.
Evite establecer el estado
Mutar el estado reactivo dentro de un efecto puede provocar bucles. Prefiera $derived para los valores calculados.
Lecturas sin seguimiento
Utilice untrack() dentro de un efecto para leer un valor sin registrar una dependencia.
Casos de uso reales
Registro, sincronización con localStorage, integración con bibliotecas de terceros y ajustes manuales del DOM.
Comprobación rápida
¿Cómo se limpia un efecto?
Resumen
$effect gestiona efectos secundarios, realiza un seguimiento de las dependencias y permite la limpieza mediante funciones devueltas.
Preguntas frecuentes
¿La lección «$effect: efectos secundarios» es gratis?
Sí — el texto completo de «$effect: efectos secundarios» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «$effect: efectos secundarios»?
Ejecute efectos secundarios que vuelvan a ejecutarse cada vez que cambien sus dependencias reactivas. Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «$effect: efectos secundarios»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Por qué las runas: más allá de la magia del compilador
- $state: reactividad granular
- $derived: valores calculados declarativos
- $effect: efectos secundarios