Why lifecycle hooks run code at key moments in Svelte - Visual Breakdown

Concept Flow - Why lifecycle hooks run code at key moments

Component Created

↓

onMount Hook Runs

↓

Component Rendered in DOM

↓

User Interaction or State Change

↓

Reactive Updates or onDestroy Hook

↓

Component Removed from DOM

Lifecycle hooks run code at key moments like when the component mounts, updates, or unmounts to manage side effects and cleanup.

Execution Sample

Svelte

import { onMount, onDestroy } from 'svelte';

onMount(() => {
  console.log('Component mounted');
});

onDestroy(() => {
  console.log('Component destroyed');
});

This code runs a message when the component appears and another when it is removed.

Execution Table

Step	Lifecycle Hook	Action	Console Output	Component State
1	Component Created	Component instance is created		Created, not in DOM
2	onMount	Runs after component is added to DOM	Component mounted	Mounted in DOM
3	User Interaction	State or props change triggers update		Updated in DOM
4	onDestroy	Runs before component is removed from DOM	Component destroyed	Removed from DOM

💡 Component is removed from DOM, lifecycle ends

Variable Tracker

Variable	Start	After onMount	After Update	After onDestroy
componentState	Created	Mounted	Updated	Destroyed

Key Moments - 3 Insights

Why does onMount run only after the component is in the DOM?

Because onMount waits until the component is fully rendered in the DOM to safely run code that may interact with the page, as shown in step 2 of the execution_table.

What happens if you try to run DOM code before onMount?

The DOM elements may not exist yet, so code could fail or behave unexpectedly. The execution_table shows onMount runs after creation but before user interaction.

Why is onDestroy important before removing a component?

It lets you clean up resources like timers or event listeners to avoid memory leaks, as shown in step 4 where onDestroy runs before removal.

Visual Quiz - 3 Questions

Look at the execution_table, what is the componentState after onMount runs?

A Mounted

B Created

C Destroyed

D Updated

💡 Hint

Check the 'componentState' column in the row where Lifecycle Hook is 'onMount'

At which step does the console output 'Component destroyed' appear?

A Step 2

B Step 3

C Step 4

D Step 1

💡 Hint

Look at the 'Console Output' column for the 'onDestroy' hook in the execution_table

If the component never unmounts, which lifecycle hook will NOT run?

A onMount

B onDestroy

C User Interaction

D Component Created

💡 Hint

Refer to the execution_table row where onDestroy runs before removal

Concept Snapshot

Lifecycle hooks in Svelte run code at key moments:
- onMount runs after component is added to the DOM
- onDestroy runs before component is removed
- They help manage side effects and cleanup
- Hooks ensure code runs safely with DOM presence
- Useful for timers, subscriptions, and cleanup

Full Transcript

In Svelte, lifecycle hooks let you run code at important times during a component's life. When a component is created, it is not yet in the page. The onMount hook runs after the component appears in the DOM, so you can safely interact with page elements. If the component updates due to user actions or state changes, reactive updates happen. Before the component is removed, onDestroy runs to clean up things like timers or event listeners. This flow ensures your code runs at the right time to avoid errors and memory leaks.