SvelteHow-ToBeginner · 3 min read

How to Use tick in Svelte: Async DOM Update Handling

In Svelte, use the tick function to wait for the DOM to update after state changes before running code that depends on the updated DOM. Import tick from 'svelte' and use it with await tick() inside an async function to pause execution until the DOM is updated.

📐

Syntax

The tick function is imported from the svelte package. It returns a promise that resolves after the DOM updates following state changes.

Use it inside an async function with await tick() to pause code execution until the DOM is ready.

javascript

import { tick } from 'svelte';

async function example() {
  // update some reactive state here
  await tick();
  // code here runs after DOM updates
}

💻

Example

This example shows a button that updates a message. After updating, it waits for the DOM to reflect the change before logging the updated text content.

svelte

<script>
  import { tick } from 'svelte';
  let message = 'Hello';

  async function updateMessage() {
    message = 'Hello, Svelte!';
    await tick();
    const el = document.getElementById('msg');
    console.log('Updated text:', el.textContent);
  }
</script>

<button on:click={updateMessage}>Update Message</button>
<p id="msg">{message}</p>

Output

Button labeled 'Update Message' and a paragraph showing 'Hello'. After clicking, paragraph updates to 'Hello, Svelte!' and console logs 'Updated text: Hello, Svelte!'

⚠️

Common Pitfalls

One common mistake is trying to access updated DOM elements immediately after changing state without await tick(). This causes code to run before the DOM updates, leading to stale or incorrect values.

Always use await tick() inside an async function when you need to work with the updated DOM.

javascript

/* Wrong way: accessing DOM immediately after state change */
function wrong() {
  message = 'New';
  const el = document.getElementById('msg');
  console.log(el.textContent); // still old value
}

/* Right way: using await tick() */
import { tick } from 'svelte';

async function right() {
  message = 'New';
  await tick();
  const el = document.getElementById('msg');
  console.log(el.textContent); // updated value
}

📊

Quick Reference

Import: import { tick } from 'svelte';
Usage: Use await tick() inside async functions to wait for DOM updates.
Purpose: Ensures code runs after Svelte applies reactive changes to the DOM.

✅

Key Takeaways

Use await tick() to wait for the DOM to update after reactive state changes in Svelte.

Always import tick from 'svelte' before using it.

Use tick inside async functions to pause execution until DOM updates complete.

Without await tick(), DOM-dependent code may run too early and see stale content.

The tick function helps synchronize JavaScript with Svelte's reactive rendering.