Named actions in Svelte - Step-by-Step Execution

Concept Flow - Named actions

Define named action function

↓

Export action for use

↓

Use action in component element

↓

Svelte calls action with element

↓

Action runs setup code

↓

Optionally return cleanup function

↓

On element removal, cleanup runs

This flow shows how a named action is defined, exported, used on an element, and how Svelte runs setup and cleanup code.

Execution Sample

Svelte

export function highlight(node) {
  node.style.backgroundColor = 'yellow';
  return {
    destroy() { node.style.backgroundColor = ''; }
  };
}

// In component:
// <p use:highlight>Text</p>

This code defines a named action that highlights an element's background yellow and cleans up by removing the highlight when the element is removed.

Execution Table

Step	Action	Input	Effect on Element	Return Value
1	Define named action 'highlight'	node (element)	No immediate effect	Function ready to use
2	Export 'highlight' for component use	N/A	No effect	Function available for import
3	Use action on <p> element	<p> element passed as node	Svelte calls highlight(node)	Object with destroy method returned
4	Action runs setup code	node.style.backgroundColor = 'yellow'	Element background becomes yellow	Same object returned
5	Element removed from DOM	destroy() called	Background color reset to ''	Cleanup done
6	No more references	N/A	Element normal	Action lifecycle ends

💡 Element removed, destroy cleanup runs, action lifecycle ends

Variable Tracker

Variable	Start	After Step 3	After Step 4	After Step 5	Final
node.style.backgroundColor	'' (empty)	'' (before action runs)	'yellow'	'' (after destroy runs)	'' (final)
highlight return value	undefined	Object with destroy method	Same object	Same object	Same object

Key Moments - 3 Insights

Why does the background color change only after the action is used on the element?

Because the action function runs only when Svelte calls it with the element (see execution_table step 4). Defining or exporting the function alone does not affect the element.

What happens if the element using the action is removed from the page?

Svelte calls the destroy method returned by the action (execution_table step 5), which cleans up by resetting the background color.

Can the action return something other than a destroy method?

Yes, but for cleanup Svelte expects an object with a destroy method. Without it, no cleanup runs (see execution_table step 5).

Visual Quiz - 3 Questions

Look at the execution table, what is the background color of the element after step 4?

A 'yellow'

B '' (empty string)

C 'blue'

D 'red'

💡 Hint

Check the 'Effect on Element' column at step 4 in the execution_table.

At which step does the cleanup code run to reset the background color?

A Step 3

B Step 5

C Step 4

D Step 6

💡 Hint

Look for when 'destroy() called' and background reset happens in the execution_table.

If the action did not return a destroy method, what would happen when the element is removed?

A Background color resets automatically

B Action runs again

C Background color stays yellow

D Error is thrown

💡 Hint

Refer to key_moments about cleanup and destroy method necessity.

Concept Snapshot

Named actions in Svelte:
- Define a function receiving the element (node).
- Modify the element inside the function.
- Return an object with optional destroy() for cleanup.
- Use the action in markup with use:actionName.
- Svelte calls destroy() when element is removed.

Full Transcript

Named actions in Svelte let you run code on elements when they appear in the page and clean up when they leave. You write a function that takes the element as input, changes it (like setting background color), and returns an object with a destroy method to undo changes. In the component, you use this action with use:actionName on an element. When Svelte renders the element, it calls your action function. When the element is removed, Svelte calls destroy to clean up. This helps keep your UI interactive and tidy.