Waiting for State Updates with tick()

Snippet

Waiting for State Updates with tick()

In Svelte, DOM updates are batched for performance. The tick function returns a promise that resolves once any pending state changes have been applied to the DOM.

snippet.js

javascript

<script>
  import { tick } from 'svelte';
  let message = 'Hello';
 
  async function update() {
    message = 'Goodbye';
    await tick();
    console.log('DOM is now updated');
  }
</script>
 
<button on:click={update}>{message}</button>

svelte

Breakdown

await tick();

Waits for the asynchronous DOM update cycle to complete before moving to the next line.

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

Waiting for State Updates with tick()

Related