2 amazing use case of tick() in Svelte that you must know
Tags: svelte, tick, beginners
Published: 2021-05-05 06:02:15

---
title: 2 amazing use case of tick() in Svelte that you must know
published: true
description: tick() is a function that returns a promise that resolves as soon as any pending state changes have been applied to the DOM. Here's 2 great examples of using tick() that you shouldn't miss out on!
tags: svelte,tick,beginners
series: "Svelte for Beginners"
//cover_image: https://direct_url_to_image.jpg
---

According to the [tutorial](https://svelte.dev/tutorial/tick), `tick()` is a function that returns a promise that resolves as soon as any pending state changes have been applied to the DOM.

But, how is this `tick()` function useful, why do you need `tick()`, and when you'll use `tick()`?

Here's 2 great examples of using `tick()` that you should't miss out on!

## 1. Waiting for reactive declared variables to get updated

Say you reactively declared a variable

```js
$: double = value * 2
```

updating `value` won't immediately update `double`.

👉 watch me explained why is that so on youtube:

{% youtube irpuHKmdW2k %}

So, here's how `tick()` can help. `tick()` returns a promise that resolves when svelte finishes the upcoming update cycle.

Meaning, by the time `tick()` resolves, you `double` is updated too!

```html
<script>
  import { tick } from 'svelte';

  let count = 1;
  $: double = count * 2;
  
  async function increment() {
    count ++;
    // double is still 2
    
    await tick();
    
    // 🎉 double is now 4!
    console.log(double); // 4
  }
</script>
```

## 2. Waiting for svelte to update the DOM elements

Say you update a variable, svelte updates the DOM asynchronously.

💡 This allow Svelte to batch DOM updates.

However, that means, if you try to read the content / attribute of the DOM element immediately, you are out of luck!

```html
<script>
  import { tick } from 'svelte';

  let count = 1;
  let div;
  
  async function increment() {
    count ++;
    
    // div still shows '1'
    console.log(div.textContent); // '1'
  }
</script>

<div bind:this={div}>{count}</div>
```

`tick()` comes in handy in this case.

So, `await` for `tick()`, by the time it resolves, the DOM has updated!

```html
<script>
  import { tick } from 'svelte';

  let count = 1;
  let div;
  
  async function increment() {
    count ++;
    
    // div still shows '1'
    console.log(div.textContent); // '1'

    await tick();
    
    // 🎉 div now showing '2'
    console.log(div.textContent); // '2'
  }
</script>

<div bind:this={div}>{count}</div>
```

📹 Watch me breaking it down in my YouTube video

{% youtube JjONMdhaCDs %}

## Bonus

Here's a few more examples when `tick()` comes in handy!

### Querying dynamic content created using `{@html}`

```html
<script>
  import { tick } from 'svelte';

  let div;
  let dynamicContent = '<div></div>';
  
  async function updateContent(newContent) {
    dynamicContent = newContent;

    await tick();
    
    // div is now updated
    // you can query the new elements
    div.querySelector('div').forEach(doSomething);
  }
</script>

<div bind:this={div}>{@html dynamicContent}</div>
```

### Restoring input cursor position after updating input value

```html
<script>
  import { tick } from 'svelte';
  let value = '';

  async function onInput(event) {
    const input = this;
    let selectionStart = input.selectionStart;
    let selectionEnd = input.selectionEnd;

    value = input.value.toUpperCase();
		
    await tick();

    input.selectionStart = selectionStart;
    input.selectionEnd = selectionEnd;
  }
</script>

<input on:input={onInput} {value} />
```