According to the tutorial, 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
$: double = value * 2
updating value
won't immediately update double
.
π watch me explained why is that so on youtube:
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!
<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!
<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!
<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
Bonus
Here's a few more examples when tick()
comes in handy!
Querying dynamic content created using {@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
<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} />
Top comments (0)