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.

Practice

1. In Svelte, when you have nested components, which lifecycle method runs first in the child component after it is added to the DOM?

easy

A. onMount

B. onDestroy

C. beforeUpdate

D. afterUpdate

Solution

1. Step 1: Understand lifecycle order in nested components

   When a child component is added to the DOM, its onMount runs after the component is rendered.

2. Step 2: Identify the first lifecycle method after mounting

   onMount is the first lifecycle method called after the component is inserted, before any updates or destruction.

3. Final Answer:

   onMount -> Option A

4. Quick Check:

   Child component mounts first with onMount [OK]

Hint: onMount runs first when a component appears [OK]

Common Mistakes:

• Confusing onDestroy as first method
• Thinking beforeUpdate runs before onMount
• Assuming afterUpdate runs on initial mount

2. Which of the following is the correct way to import and use onMount in a nested Svelte component?

easy

A. import { onMount } from 'svelte/lifecycle'; onMount(() => { console.log('Mounted'); });

B. import onMount from 'svelte'; onMount(() => { console.log('Mounted'); });

C. import { onMount } from 'svelte'; onMount(() => { console.log('Mounted'); });

D. import { onMount } from 'svelte'; onMount = () => { console.log('Mounted'); };

Solution

1. Step 1: Check correct import syntax

   The correct import is import { onMount } from 'svelte'; using named import from 'svelte'.

2. Step 2: Verify usage of onMount function

   Calling onMount(() => { ... }) registers the callback properly. Assigning onMount to a function is incorrect.

3. Final Answer:

   import { onMount } from 'svelte'; onMount(() => { console.log('Mounted'); }); -> Option C

4. Quick Check:

   Named import and callback usage [OK]

Hint: Use named import from 'svelte' for lifecycle hooks [OK]

Common Mistakes:

• Using default import instead of named import
• Importing from wrong path like 'svelte/lifecycle'
• Assigning onMount instead of calling it

3. Consider a parent component that includes a child component. Both have onMount hooks that log messages. What is the order of console logs when the parent is rendered?

medium

A. Child's onMount logs first, then parent's onMount

B. Parent's onMount logs first, then child's onMount

C. Both onMount logs happen simultaneously

D. No logs appear because onMount doesn't run in nested components

Solution

1. Step 1: Understand mounting order in nested components

   Child components mount before their parents finish mounting, so child's onMount runs first.

2. Step 2: Confirm console log order

   Child's onMount logs first, then parent's onMount logs after child is fully mounted.

3. Final Answer:

   Child's onMount logs first, then parent's onMount -> Option A

4. Quick Check:

   Child mounts before parent finishes [OK]

Hint: Child onMount runs before parent onMount [OK]

Common Mistakes:

• Assuming parent mounts before child
• Thinking onMount runs simultaneously
• Believing onMount doesn't run in nested components

4. You have a nested component with an onDestroy hook, but it never runs when the component is removed. What is the most likely cause?

medium

A. The parent component's onDestroy prevents child's onDestroy

B. The component is never actually removed from the DOM

C. You used onMount instead of onDestroy

D. You forgot to import onDestroy from 'svelte'

Solution

1. Step 1: Check if component is removed from DOM

   onDestroy only runs when the component is removed. If it stays in DOM, it won't run.

2. Step 2: Verify other causes

   Importing onDestroy incorrectly or mixing hooks causes errors, but the main reason is component not unmounting.

3. Final Answer:

   The component is never actually removed from the DOM -> Option B

4. Quick Check:

   onDestroy runs only on removal [OK]

Hint: onDestroy runs only when component leaves DOM [OK]

Common Mistakes:

• Expecting onDestroy without unmounting
• Confusing onMount with onDestroy
• Assuming parent's lifecycle affects child's onDestroy

5. You have a nested component that fetches data in onMount and cleans up a subscription in onDestroy. If the parent conditionally renders this child multiple times, what is the best practice to avoid memory leaks?

hard

A. Avoid conditional rendering of the child component

B. Move the data fetching and subscription to the parent component only

C. Use beforeUpdate in the child to reset subscriptions

D. Ensure the child's onDestroy properly unsubscribes every time it unmounts

Solution

1. Step 1: Understand lifecycle with conditional rendering

   When the child mounts and unmounts repeatedly, onDestroy must clean up resources each time to prevent leaks.

2. Step 2: Evaluate best practice for cleanup

   Properly unsubscribing in onDestroy ensures no leftover subscriptions remain after unmount.

3. Final Answer:

   Ensure the child's onDestroy properly unsubscribes every time it unmounts -> Option D

4. Quick Check:

   Clean up in onDestroy to avoid leaks [OK]

Hint: Always clean subscriptions in onDestroy [OK]

Common Mistakes:

• Ignoring cleanup in onDestroy
• Moving logic unnecessarily to parent
• Using beforeUpdate for cleanup instead of onDestroy