Lifecycle in nested components in Svelte - Step-by-Step Execution

Concept Flow - Lifecycle in nested components

Parent Component Mount

↓

Parent onMount runs

↓

Child Component Mount

↓

Child onMount runs

↓

Child Component Unmount

↓

Child onDestroy runs

↓

Parent Component Unmount

↓

Parent onDestroy runs

This flow shows how parent and child components mount and unmount, triggering their lifecycle hooks in order.

Execution Sample

Svelte

/* Parent.svelte */
<script>
  import Child from './Child.svelte';
  import { onMount, onDestroy } from 'svelte';
  onMount(() => console.log('Parent mounted'));
  onDestroy(() => console.log('Parent destroyed'));
</script>
<Child />

Parent component imports Child and logs messages on mount and destroy; Child also has similar lifecycle hooks.

Execution Table

Step	Component	Lifecycle Hook	Action	Console Output
1	Parent	onMount	Parent component mounts	Parent mounted
2	Child	onMount	Child component mounts	Child mounted
3	Child	onDestroy	Child component unmounts	Child destroyed
4	Parent	onDestroy	Parent component unmounts	Parent destroyed

💡 All components have mounted and then unmounted, lifecycle hooks completed.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4
ParentMounted	false	true	true	true	false
ChildMounted	false	false	true	false	false

Key Moments - 2 Insights

Why does the child's onMount run after the parent's onMount?

Because the parent renders the child component first, so the parent's onMount runs, then the child mounts and its onMount runs, as shown in steps 1 and 2 in the execution table.

When the child unmounts, does the parent's onDestroy run immediately?

No, the child's onDestroy runs first (step 3), then the parent's onDestroy runs after the child is fully removed (step 4), as shown in the execution table.

Visual Quiz - 3 Questions

Look at the execution table, what is the console output at Step 2?

A Parent mounted

B Parent destroyed

C Child mounted

D Child destroyed

💡 Hint

Check the 'Console Output' column for Step 2 in the execution table.

At which step does the child component unmount?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look for 'Child component unmounts' in the 'Action' column of the execution table.

If the child component did not unmount, which lifecycle hook would NOT run?

A Parent onMount

B Child onDestroy

C Parent onDestroy

D Child onMount

💡 Hint

Refer to the 'Lifecycle Hook' column and consider which hook runs on unmount.

Concept Snapshot

Svelte nested components lifecycle:
- Parent mounts, runs onMount
- Child mounts inside parent, runs onMount
- Child unmounts, runs onDestroy
- Parent unmounts, runs onDestroy
Lifecycle hooks run in mount order and reverse on unmount.

Full Transcript

In Svelte, when you have nested components, the parent component mounts first and runs its onMount lifecycle hook. Then the child component mounts inside the parent and runs its own onMount hook. When unmounting, the child component runs its onDestroy hook first, followed by the parent's onDestroy hook. This order ensures that children clean up before parents. The execution table shows these steps with console outputs. Variables track whether each component is mounted or not at each step. Understanding this order helps avoid confusion about when lifecycle hooks run in nested components.