tick() în Svelte: Așteptarea Actualizării DOM în Svelte & SvelteKit

Sincronizarea precisă cu arborele DOM

În Svelte, modificările de stare nu actualizează DOM-ul instantaneu, ci sunt lotizate (batched) în micro-task-uri pentru eficiență. Dacă doriți să măsurați înălțimea unui element sau să selectați un text imediat după modificarea unei variabile, await tick() garantează că DOM-ul este complet la zi.

<script>
  import { tick } from 'svelte';
  let arataInput = $state(false);
  let elementInput;

  async function afiseazaSiFocalizeaza() {
    arataInput = true;
    await tick(); // Așteptăm apariția fizică a inputului în DOM
    elementInput.focus();
  }
</script>