Action update and destroy in Svelte - Step-by-Step Execution

Concept Flow - Action update and destroy

Component mounts

↓

Action called

↓

Action returns object with update and destroy

↓

update called on prop change

↓

destroy called on component unmount

↓

Cleanup done

When a Svelte component mounts, the action runs and returns update and destroy functions. Update runs on prop changes, destroy runs on unmount.

Execution Sample

Svelte

function highlight(node, color) {
  node.style.backgroundColor = color;
  return {
    update(newColor) { node.style.backgroundColor = newColor; },
    destroy() { node.style.backgroundColor = ''; }
  };
}

This action sets background color, updates it when color changes, and clears it on destroy.

Execution Table

Step	Trigger	Action Function Called	Parameter	Effect on DOM
1	Component mounts	highlight	"yellow"	Sets backgroundColor to yellow
2	Prop changes color to "lightblue"	update	"lightblue"	Changes backgroundColor to lightblue
3	Prop changes color to "pink"	update	"pink"	Changes backgroundColor to pink
4	Component unmounts	destroy	none	Clears backgroundColor style

💡 Component unmount triggers destroy, cleaning up styles.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4
node.style.backgroundColor	''	"yellow"	"lightblue"	"pink"	''

Key Moments - 3 Insights

Why does the update function run multiple times?

Because the color prop changes multiple times (see execution_table steps 2 and 3), update runs each time to reflect the new color.

What happens if destroy is not defined?

Without destroy (step 4), the style would not be cleaned up on unmount, possibly leaving unwanted styles on the element.

Does the action run again when props change?

No, the action runs once on mount (step 1). On prop changes, only update runs (steps 2 and 3).

Visual Quiz - 3 Questions

Look at the execution_table, what is the backgroundColor after step 2?

A "pink"

B "yellow"

C "lightblue"

D ''

💡 Hint

Check the 'Effect on DOM' column at step 2 in execution_table.

At which step does the destroy function run?

A Step 1

B Step 4

C Step 2

D Step 3

💡 Hint

Look for 'Component unmounts' in the 'Trigger' column in execution_table.

If the color prop never changes, how many times does update run?

A 0 times

B 1 time

C Multiple times

D Update does not exist

💡 Hint

See execution_table steps 2 and 3 where update runs on prop changes.

Concept Snapshot

Svelte actions run once on mount and can return update and destroy functions.
update runs when props change to update the element.
destroy runs on unmount to clean up.
Use update to react to prop changes without rerunning the whole action.
Use destroy to remove side effects or event listeners.

Full Transcript

In Svelte, an action is a function that runs when an element is created. It can return an object with update and destroy functions. The update function runs whenever the action's parameters change, allowing you to update the element accordingly. The destroy function runs when the element is removed from the DOM, letting you clean up any changes or listeners. For example, a highlight action sets the background color on mount, updates it when the color changes, and clears it on destroy. This flow helps keep your UI responsive and clean.