beforeUpdate and afterUpdate in Svelte

Introduction

These functions let you run code right before or right after the webpage updates. This helps you react to changes smoothly.

You want to check or change something just before the page changes.

You need to run code after the page updates to adjust something on the screen.

You want to keep track of changes and respond immediately.

You want to clean up or prepare data before the update happens.

You want to trigger animations or effects after the update.

Syntax

Svelte

import { beforeUpdate, afterUpdate } from 'svelte';

beforeUpdate(() => {
  // code to run before update
});

afterUpdate(() => {
  // code to run after update
});

Both functions take a callback that runs at specific times during the update cycle.

They run every time the component updates, not just once.

Examples

This logs a message before every update.

Svelte

import { beforeUpdate } from 'svelte';

beforeUpdate(() => {
  console.log('About to update the component');
});

This logs a message after every update.

Svelte

import { afterUpdate } from 'svelte';

afterUpdate(() => {
  console.log('Component just updated');
});

This shows how to use both to track a variable before and after updates.

Svelte

import { beforeUpdate, afterUpdate } from 'svelte';

let count = 0;

beforeUpdate(() => {
  console.log(`Before update: count is ${count}`);
});

afterUpdate(() => {
  console.log(`After update: count is ${count}`);
});

Sample Program

This Svelte component shows the count number. When you click the button, it increases the count. The console logs messages before and after the count changes on the page.

Svelte

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

  let count = 0;

  beforeUpdate(() => {
    console.log(`Before update: count is ${count}`);
  });

  afterUpdate(() => {
    console.log(`After update: count is ${count}`);
  });

  function increment() {
    count += 1;
  }
</script>

<button on:click={increment} aria-label="Increase count">Increase</button>
<p>Count: {count}</p>

Important Notes

Use these functions to keep your UI and data in sync smoothly.

Remember they run on every update, so avoid heavy work inside them.

They help with animations, logging, or preparing data before or after changes.

Summary

beforeUpdate runs code just before the page changes.

afterUpdate runs code just after the page changes.

Use them to react to changes and keep your app smooth and responsive.