Snippet

Waiting for DOM Updates with tick

In Svelte, state changes don't update the DOM immediately. They are batched for efficiency. The tick function returns a promise that resolves as soon as any pending state changes have been applied to the DOM.

snippet.js

javascript

import { tick } from 'svelte';
 
let visible = false;
 
async function showAndFocus() {
  visible = true;
  await tick();
  document.getElementById('input').focus();
}

svelte

Breakdown

await tick();

Pauses the function execution until the DOM has been synchronized with the latest state.

document.getElementById('input').focus();

Safely interacts with an element that might not have existed before the tick() resolved.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

Waiting for DOM Updates with tick

Related