Lifecycle Functions in Svelte

# CHAPTER 12

Lifecycle Functions in Svelte #

1. Chapter Introduction #

2. Learning Objectives #

• Use onMount for initialization and data fetching.

• Use beforeUpdate and afterUpdate for DOM synchronization.

• Use onDestroy for cleanup (clearing intervals, unsubscribing).

• Understand the order of lifecycle execution.

3. Lifecycle Execution Order #

Component Created
      ↓
  Script runs (variables initialized, $: labels set up)
      ↓
  onMount()  ← DOM is ready, safe to query DOM
      ↓
  [User interactions / data changes]
      ↓
  beforeUpdate()  ← Before DOM updates
      ↓
  DOM updates
      ↓
  afterUpdate()   ← After DOM updates
      ↓
Component Destroyed
      ↓
  onDestroy()     ← Cleanup

4. onMount — After Component Mounts #

<script>
  import { onMount } from &#039;svelte';

  let users = [];
  let loading = true;
  let error = &#039;';

  onMount(async () => {
    try {
      const res = await fetch(&#039;https://jsonplaceholder.typicode.com/users');
      users = await res.json();
    } catch (e) {
      error = e.message;
    } finally {
      loading = false;
    }
  });
</script>

{#if loading}<p>Loading...</p>
{:else if error}<p>Error: {error}</p>
{:else}
  {#each users as user (user.id)}
    <p>{user.name} — {user.email}</p>
  {/each}
{/if}

5. onDestroy — Cleanup #

<script>
  import { onMount, onDestroy } from &#039;svelte';

  let seconds = 0;
  let intervalId;

  onMount(() => {
    intervalId = setInterval(() => {
      seconds++;
    }, 1000);
  });

  onDestroy(() => {
    clearInterval(intervalId); // Critical! Prevents memory leaks
    console.log(&#039;Timer component destroyed, interval cleared.');
  });
</script>

<p>Timer: {seconds}s</p>

6. beforeUpdate and afterUpdate #

<script>
  import { beforeUpdate, afterUpdate } from &#039;svelte';

  let messages = [];
  let chatContainer;

  beforeUpdate(() => {
    // Check if user is near the bottom before update
    if (chatContainer) {
      const { scrollTop, scrollHeight, clientHeight } = chatContainer;
      // Store scroll info before DOM updates
    }
  });

  afterUpdate(() => {
    // Auto-scroll to bottom after new message added
    if (chatContainer) {
      chatContainer.scrollTop = chatContainer.scrollHeight;
    }
  });
</script>

<div class="chat" bind:this={chatContainer}>
  {#each messages as msg}
    <div class="message">{msg}</div>
  {/each}
</div>

7. onMount Cleanup Return #

<script>
  import { onMount } from &#039;svelte';

  onMount(() => {
    const handler = (e) => console.log(&#039;Key pressed:', e.key);
    window.addEventListener(&#039;keydown', handler);

    // Return cleanup function — runs on destroy
    return () => {
      window.removeEventListener(&#039;keydown', handler);
    };
  });
</script>

8. bind:this — Accessing DOM Elements #

<script>
  import { onMount } from &#039;svelte';
  let inputEl;

  onMount(() => {
    inputEl.focus(); // Auto-focus the input on mount
  });
</script>

<input bind:this={inputEl} placeholder="Auto-focused!" />

9. Common Mistakes #

• Fetch inside <script> top-level: This runs on the server too (in SSR). Always put async fetching inside onMount for client-only behavior.

• Forgetting onDestroy for intervals/subscriptions: Memory leaks are the #1 lifecycle bug. Every setInterval, event listener, or manual store subscription needs a corresponding cleanup.

10. MCQs #

11. Interview Questions #

• Q: Compare Svelte's onMount with React's useEffect. What differences exist?

• Q: What happens if you set state inside afterUpdate without a guard condition?

12. Summary #

13. Next Chapter Recommendation #