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.