$effect: Side Effects
Run side effects that re-execute whenever their reactive dependencies change.
$effect: Side Effects is a free Sveltejs Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Sveltejs Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Side Effect Rune
Use $effect(() => { ... }) for side effects that respond to reactive changes.
$effect(() => {
console.log("count is", count);
});Auto Tracked
Svelte tracks dependencies inside the callback automatically.
Cleanup Function
Return a function to clean up before the next run or on destroy.
$effect(() => {
const id = setInterval(tick, 1000);
return () => clearInterval(id);
});Runs After Mount
The effect runs after the component mounts and on every dependency change.
No SSR
$effect callbacks do not run during SSR. Use them for browser-only logic.
Pre-Mount Effects
$effect.pre runs before DOM updates; useful for measure-and-apply patterns.
Root Effects
$effect.root creates an effect outside component lifecycle for advanced cases.
Compared to onMount
onMount runs once; $effect re-runs on dependency changes. Often $effect replaces both onMount + reactive patterns.
Avoid Setting State
Mutating reactive state inside an effect can cause loops. Prefer $derived for computed values.
Untracked Reads
Use untrack() inside an effect to read a value without registering a dependency.
Real Use Cases
Logging, syncing to localStorage, third-party library integration, manual DOM tweaks.
Quick Check
How do you clean up an effect?
Recap
$effect handles side effects, tracks dependencies, and supports cleanup via returned functions.
Frequently asked questions
Is the “$effect: Side Effects” lesson free?
Yes — the full text of “$effect: Side Effects” is free to read here on the web, and the Sveltejs Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Sveltejs Academy course, upgrade to CoddyKit PRO.
What will I learn in “$effect: Side Effects”?
Run side effects that re-execute whenever their reactive dependencies change. You practise Sveltejs Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Sveltejs Academy?
No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “$effect: Side Effects” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Sveltejs Academy lesson?
Yes. Every Sveltejs Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.