tick function in Svelte

Introduction

The tick function helps you wait for Svelte to finish updating the screen before running more code. It makes sure your code runs after the page changes are visible.

You want to run code right after the page updates.

You need to measure or change something on the page after Svelte changes it.

You want to wait for animations or transitions to finish before doing more work.

Syntax

Svelte

import { tick } from 'svelte';

await tick();

You must use await because tick returns a promise.

Use tick inside async functions to pause until updates finish.

Examples

This waits for Svelte to update the DOM after changing count.

Svelte

import { tick } from 'svelte';

async function update() {
  count = count + 1;
  await tick();
  console.log('DOM updated');
}

Sample Program

This Svelte component increases a number when you click the button. It waits for the screen to update before logging the new count.

Svelte

<script>
  import { tick } from 'svelte';
  let count = 0;

  async function increment() {
    count += 1;
    await tick();
    console.log(`Count updated to ${count}`);
  }
</script>

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

Important Notes

Always use await with tick to pause correctly.

tick only waits for the next update cycle, not for long delays.

Use tick to avoid running code too early before the page changes.

Summary

tick waits for Svelte to finish updating the page.

Use it with await inside async functions.

It helps run code after the screen shows changes.