Open code, practice, and notes →
Download source with English comments · for reading
Svelte · 13 onMount and Initial Resources
Series contents · Technology map
Stage: Component Contracts and Effects · External example · preview instructions · Storage ID: svelte-step-13
Goals and learning outcomes
- While visible, 1 pointer input is handled 1 time.
- There are no pointer handling logs while hidden.
Prerequisites
Unit 13 continues with the work and experiment records from Unit 12.
Key concepts and explanations
Mount Timing
onMount runs after the component is connected to the DOM. Do not use it as a place to create DOM resources during server rendering.
Synchronous Return
A function returned synchronously by onMount runs as cleanup on removal. An async callback returns a Promise, so do not mistake it for the same cleanup contract.
Practice setup
First check the execution scope guidance on the example screen. The following environment is for extending the assignment in a separate project. Compile and run .svelte files in a separate Svelte 5 Vite project. Record package versions and the lockfile. Frontory’s Svelte preview uses actual writable stores and an explicit DOM adapter; it is not a .svelte compiler or a runes runner.
The linked example is a starting point. It does not implement every task below. Complete work beyond its supported scope in a separate project.
Practice tasks
- In src/PointerCanvas.svelte, register a pointer listener with onMount.
- Return cleanup that calls removeEventListener with the same function reference.
- Toggle visibility 5 times and count how many times one pointer input is handled.
Variables to observe
| Variable | Baseline | Change | Expected change / hypothesis |
|---|---|---|---|
| Mount Count | 1 time | 5 times | Repeated mounting does not increase the number of calls per pointer input. |
Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.
Completion criteria
- While visible, 1 pointer input is handled 1 time.
- There are no pointer handling logs while hidden.
Self-check
- Why does returning cleanup from async onMount behave differently?
- Between onMount and $effect, which value changes require a rerun?
Official references
Linked example and execution scope
Example source · Runtime environments and limits
The preview is a Svelte writable/DOM contract experiment. To run runes, snippets, and compiled output, run the actual App.svelte in a Svelte 5 project.
Source code and records are not overwritten automatically. Resetting an existing example also preserves your notes.
Next learning
Previous: $effect Dependencies and Cleanup · Next: Events and Resource Cleanup