Lifecycle in nested components in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the onMount lifecycle function in Svelte?

The onMount function runs after the component is first added to the page. It is used to run code that needs the component to be visible, like fetching data or setting up event listeners.

intermediate

How do nested components affect lifecycle execution order in Svelte?

Child components mount first, then their parent components mount. When unmounting, children are removed before their parents. This order ensures children are ready when parents finish mounting.

beginner

What lifecycle function should you use to clean up resources in a Svelte component?

Use the function returned by onMount or the onDestroy lifecycle function to clean up resources like timers or event listeners when the component is removed.

intermediate

In nested Svelte components, when does the onDestroy lifecycle function run?

The onDestroy function runs when a component is removed from the page. For nested components, children run their onDestroy before their parents do.

intermediate

Why is understanding lifecycle order important in nested Svelte components?

Knowing lifecycle order helps avoid bugs like trying to use a child component before it exists or cleaning up resources too late. It ensures smooth setup and teardown of components.

In Svelte, which lifecycle function runs first when a nested component is added to the page?

A Parent component's onMount

B Parent component's onDestroy

C Child component's onMount

D Child component's onDestroy

The child component's onMount runs first, then the parent component's onMount.

Which lifecycle function is best for cleaning up event listeners in a Svelte component?

A onMount

B onDestroy

C afterUpdate

D beforeUpdate

The onDestroy function runs when the component is removed and is the right place to clean up event listeners.

When a parent Svelte component is removed, what happens first?

A Parent's onDestroy runs before child's

B Both run at the same time

C No onDestroy runs

D Child's onDestroy runs before parent's

Children run their onDestroy before their parents to ensure proper cleanup.

What does the onMount lifecycle function in Svelte NOT do?

A Clean up event listeners

B Run code after component appears on page

C Set up timers or fetch data

D Return a cleanup function

Cleaning up event listeners is done in onDestroy, not onMount.

Why should you be careful about lifecycle order in nested components?

A To avoid using child components before they exist

B To make components load slower

C To prevent parent components from mounting

D To skip cleanup functions

Understanding lifecycle order helps avoid bugs like using child components before they are ready.

Explain the order of lifecycle functions when mounting and unmounting nested components in Svelte.

Think about who comes first when adding and removing components.

Describe how to properly clean up resources like event listeners in nested Svelte components.

Focus on the lifecycle function that runs when components are removed.

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