beforeUpdate and afterUpdate in Svelte - Step-by-Step Execution

Concept Flow - beforeUpdate and afterUpdate

Component State Changes

↓

beforeUpdate runs

↓

DOM updates with new state

↓

afterUpdate runs

↓

Component ready with updated DOM

When component data changes, beforeUpdate runs first, then the DOM updates, and finally afterUpdate runs after the DOM is updated.

Execution Sample

Svelte

import { beforeUpdate, afterUpdate } from 'svelte';

let count = 0;

beforeUpdate(() => {
  console.log('Before update:', count);
});

afterUpdate(() => {
  console.log('After update:', count);
});

function increment() {
  count += 1;
}

This code logs messages before and after the DOM updates when the count changes.

Execution Table

Step	Trigger	count Value	Action	Console Output	DOM State
1	Initial render	0	Render component	No logs	count displayed as 0
2	Call increment() (count → 1)	1	beforeUpdate runs	Before update: 1	DOM still shows 0
3	DOM update	1	DOM updates to show 1	No logs	count displayed as 1
4	After DOM update	1	afterUpdate runs	After update: 1	count displayed as 1
5	Call increment() again (count → 2)	2	beforeUpdate runs	Before update: 2	DOM still shows 1
6	DOM update	2	DOM updates to show 2	No logs	count displayed as 2
7	After DOM update	2	afterUpdate runs	After update: 2	count displayed as 2
8	No more changes	2	No further updates	No logs	count displayed as 2

💡 No more state changes, so no more beforeUpdate or afterUpdate calls.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 5	After Step 6	Final
count	0	1	1	2	2	2

Key Moments - 3 Insights

Why does beforeUpdate log the new count value before the DOM changes?

Because beforeUpdate runs after the state has changed but before the DOM updates, it sees the new state before it is reflected in the DOM, as shown in steps 2 and 5.

Why does afterUpdate log the new count value after the DOM changes?

afterUpdate runs after the DOM updates, so it sees the updated state and DOM, as shown in steps 4 and 7.

Does beforeUpdate run if the state does not change?

No, beforeUpdate only runs when the component is about to update due to state changes, so if no state changes, it does not run (step 8).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of count when beforeUpdate runs at step 2?

A 0

B 1

C undefined

D 2

💡 Hint

Check the 'count Value' column at step 2 in the execution_table.

At which step does the DOM first show the updated count value 1?

A Step 3

B Step 2

C Step 4

D Step 5

💡 Hint

Look at the 'DOM State' column to see when count changes from 0 to 1.

If we did not call increment(), which steps would NOT happen?

A Steps 1 and 8 only

B Only step 1

C Steps 2, 3, 4, 5, 6, 7

D All steps would happen anyway

💡 Hint

beforeUpdate and afterUpdate run only on state changes, see steps triggered by increment() calls.

Concept Snapshot

Svelte's beforeUpdate runs just before the DOM updates when state changes.
afterUpdate runs just after the DOM updates.
Use beforeUpdate to check or prepare before DOM changes.
Use afterUpdate to react after DOM changes.
Both run only when component updates due to state changes.

Full Transcript

In Svelte, when component data changes, the beforeUpdate function runs first, letting you act before the DOM changes. Then the DOM updates to reflect the new data. After that, afterUpdate runs, letting you respond after the DOM is updated. For example, if a count variable changes, beforeUpdate sees the new count before the DOM changes to match it, and afterUpdate sees the new count after the DOM updates. These functions only run when the component updates due to state changes, not on initial render or if no changes happen.