Lifecycle in nested components in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

Understanding lifecycle order in nested Svelte components

Consider a parent Svelte component that includes a child component. Both use onMount lifecycle functions that log messages. What is the order of console logs when the parent component is first rendered?

Svelte

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
  import { onMount } from 'svelte';
  onMount(() => console.log('Parent mounted'));
</script>
<Child />

<!-- Child.svelte -->
<script>
  import { onMount } from 'svelte';
  onMount(() => console.log('Child mounted'));
</script>
<p>Child content</p>

A Both logs appear simultaneously

B "Parent mounted" logged first, then "Child mounted"

C "Child mounted" logged first, then "Parent mounted"

D No logs appear because onMount is not called in nested components

💡 Hint

Remember that child components mount before their parents finish mounting.

In Svelte, onMount runs after the component is first rendered. Nested child components mount before the parent finishes mounting, so the child's onMount runs before the parent's.

❓ lifecycle

intermediate

When does onDestroy run in nested components?

If a parent Svelte component is removed from the DOM, when do the onDestroy lifecycle functions of its nested child components run?

Svelte

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
  import { onDestroy } from 'svelte';
  onDestroy(() => console.log('Parent destroyed'));
</script>
{#if showChild}
  <Child />
{/if}

<!-- Child.svelte -->
<script>
  import { onDestroy } from 'svelte';
  onDestroy(() => console.log('Child destroyed'));
</script>
<p>Child content</p>

A Only Parent's onDestroy runs, Child's does not

B Child's onDestroy runs before Parent's onDestroy

C Parent's onDestroy runs before Child's onDestroy

D Neither onDestroy runs automatically

💡 Hint

Think about the order components are torn down in the DOM.

When a parent component is removed, Svelte destroys child components first, so their onDestroy runs before the parent's.

🔧 Debug

advanced

Why does a nested component's onMount not run as expected?

A developer notices that a nested Svelte component's onMount callback never logs anything, even though the component renders. What is the most likely cause?

Svelte

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
  let showChild = false;
  setTimeout(() => showChild = true, 1000);
</script>
{#if showChild}
  <Child />
{/if}

<!-- Child.svelte -->
<script>
  import { onMount } from 'svelte';
  onMount(() => console.log('Child mounted'));
</script>
<p>Child content</p>

A The Child component is never added to the DOM because showChild stays false

B The onMount callback is inside a <script> tag but not imported correctly

C The onMount callback runs only once and the console is cleared before logging

D The Child component is added after 1 second, so onMount runs after delay

💡 Hint

Check when the Child component appears in the DOM.

The Child component is conditionally rendered after 1 second. Its onMount runs when it appears, so the log happens after the delay.

📝 Syntax

advanced

Identify the syntax error in nested component lifecycle usage

Which option contains a syntax error in using onMount inside a nested Svelte component?

Svelte

<!-- Child.svelte -->
<script>
  import { onMount } from 'svelte';
  onMount(() => {
    console.log('Mounted');
  })
</script>
<p>Child content</p>

A Missing closing brace for the arrow function block

B Missing import statement for onMount

C Using onMount inside <style> tag instead of <script>

D Using onMount without parentheses

💡 Hint

Check the parentheses and braces in the callback function.

The arrow function passed to onMount is missing the closing brace } before the closing parenthesis ), causing a syntax error.

❓ state_output

expert

How does state update affect lifecycle in nested Svelte components?

Given a parent component that passes a prop to a child component, and the child uses onMount to log the prop value, what happens if the parent updates the prop after mount?

Svelte

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
  import { onMount } from 'svelte';
  let count = 0;
  onMount(() => {
    setTimeout(() => count = 1, 1000);
  });
</script>
<Child value={count} />

<!-- Child.svelte -->
<script>
  import { onMount } from 'svelte';
  export let value;
  onMount(() => console.log('Mounted with value:', value));
  $: console.log('Value changed to:', value);
</script>
<p>Value is {value}</p>

A Child logs 'Mounted with value: 0' once, then logs 'Value changed to: 1' after update

B Child logs nothing because onMount does not run with props

C Child only logs 'Value changed to: 1' after update, no onMount log

D Child logs 'Mounted with value: 0' and 'Mounted with value: 1' after update

💡 Hint

Remember that onMount runs once, but reactive statements run on prop changes.

The onMount callback runs once when the child mounts, logging the initial prop value 0. Later, when the parent updates count to 1, the reactive statement logs the new value. The onMount does not run again.