beforeUpdate and afterUpdate
Hook into the update cycle to inspect or modify the DOM before and after reactive changes.
beforeUpdate and afterUpdate is a free Sveltejs Academy lesson on CoddyKit — lesson 3 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.
When They Run
beforeUpdate runs before reactive updates flush to DOM; afterUpdate runs immediately after.
Use Cases
Use them to read DOM measurements before changes and adjust scroll position after.
Auto-Scroll Chat
A classic use is auto-scrolling a chat to the bottom only when the user was already at the bottom.
let div, autoscroll;
beforeUpdate(() => {
autoscroll = div && (div.scrollTop + div.offsetHeight >= div.scrollHeight - 20);
});
afterUpdate(() => {
if (autoscroll) div.scrollTo(0, div.scrollHeight);
});Run Often
These callbacks run on every update. Keep them fast.
Server Behavior
They do not run during SSR. Treat them as browser-only.
Pair Carefully
State you save in beforeUpdate can be applied in afterUpdate for measure-and-apply patterns.
Avoid for Most Logic
Most logic belongs in reactive statements or actions. Use these only for DOM measurement.
Order of Execution
Order per update: reactive statements -> beforeUpdate -> DOM patch -> afterUpdate.
First Mount
Both run on first mount in addition to subsequent updates. Account for the initial run.
Combine with bind:this
You need a reference to the DOM element to measure. Use bind:this.
Tick Alternative
For one-off measurements after a change, await tick() can be more readable.
Quick Check
When does afterUpdate run?
Recap
beforeUpdate captures pre-change state; afterUpdate reads or modifies the freshly updated DOM.
Frequently asked questions
Is the “beforeUpdate and afterUpdate” lesson free?
Yes — the full text of “beforeUpdate and afterUpdate” 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 “beforeUpdate and afterUpdate”?
Hook into the update cycle to inspect or modify the DOM before and after reactive changes. 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 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “beforeUpdate and afterUpdate” 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.
All lessons in this course
- onMount: Running After Render
- onDestroy: Cleanup
- beforeUpdate and afterUpdate
- tick(): Waiting for DOM Updates