Lifecycle in nested components in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to run a function when the component is first added to the page.

Svelte

<script>
  import { [1] } from 'svelte';

  onMount(() => {
    console.log('Component mounted');
  });
</script>

Drag options to blanks, or click blank then click option'

AonMount

BonDestroy

CbeforeUpdate

DafterUpdate

Attempts:

3 left

💡 Hint

Common Mistakes

Using onDestroy instead of onMount

Confusing onMount with beforeUpdate

The onMount function runs code when the component is first added to the page.

2fill in blank

medium

Complete the code to clean up when a nested component is removed.

Svelte

<script>
  import { onDestroy } from 'svelte';

  onDestroy(() => {
    [1];
  });
</script>

Drag options to blanks, or click blank then click option'

Aconsole.log('Component created')

Bconsole.log('Component mounted')

Cconsole.log('Component updated')

Dconsole.log('Component removed')

Attempts:

3 left

💡 Hint

Common Mistakes

Logging 'Component mounted' inside onDestroy

Using onMount code inside onDestroy

The onDestroy function runs cleanup code when the component is removed from the page.

3fill in blank

hard

Fix the error in the nested component lifecycle hook usage.

Svelte

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    console.log('Nested component [1]');
  });
</script>

Drag options to blanks, or click blank then click option'

Aupdated

Bdestroyed

Cmounted

Dcreated

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'updated' or 'destroyed' in onMount message

Confusing lifecycle stages

The onMount hook runs when the component is mounted, so the message should say 'mounted'.

4fill in blank

hard

Fill both blanks to run code before and after the component updates.

Svelte

<script>
  import { [1], [2] } from 'svelte';

  [1](() => {
    console.log('Before update');
  });

  [2](() => {
    console.log('After update');
  });
</script>

Drag options to blanks, or click blank then click option'

AbeforeUpdate

BonMount

CafterUpdate

DonDestroy

Attempts:

3 left

💡 Hint

Common Mistakes

Using onMount or onDestroy instead of update hooks

Mixing up beforeUpdate and afterUpdate

beforeUpdate runs code before the component updates, and afterUpdate runs code after the update.

5fill in blank

hard

Fill all three blanks to correctly handle lifecycle in a nested component.

Svelte

<script>
  import { [1], [2], [3] } from 'svelte';

  [1](() => {
    console.log('Mounted');
  });

  [2](() => {
    console.log('Before update');
  });

  [3](() => {
    console.log('Cleanup on destroy');
  });
</script>

Drag options to blanks, or click blank then click option'

AonMount

BbeforeUpdate

ConDestroy

DafterUpdate

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up onDestroy and afterUpdate

Using afterUpdate instead of beforeUpdate for 'Before update' message

onMount runs when the component appears, beforeUpdate runs before changes, and onDestroy runs cleanup when removed.