title: Understanding Svelte tick() lifecycle
body: <p>I'm halfway through the Svelte docs and I have a hard time understanding the <code>tick()</code> lifecycle. Is there an alternative to it in React? </p>
  
  <p>For example, what it actually does in this example from <a href="https://svelte.dev/tutorial/tick" rel="nofollow noreferrer">the tutorial</a>?</p>
  
  <pre><code>&lt;script&gt;
  import { tick }  from 'svelte';
  let text = `Select some text and hit the tab key to toggle uppercase`;
  
  async function handleKeydown(event) {
      if (event.which !== 9) return;
  
      event.preventDefault();
  
      const { selectionStart, selectionEnd, value } = this;
      const selection = value.slice(selectionStart, selectionEnd);
  
      const replacement = /[a-z]/.test(selection)
          ? selection.toUpperCase()
          : selection.toLowerCase();
  
      text = (
          value.slice(0, selectionStart) +
          replacement +
          value.slice(selectionEnd)
      );
  
      await tick();
      this.selectionStart = selectionStart;
      this.selectionEnd = selectionEnd;
  }
  &lt;/script&gt;
  
  &lt;style&gt;
      textarea {
          width: 100%;
          height: 200px;
      }
  &lt;/style&gt;
  
  &lt;textarea value={text} on:keydown={handleKeydown}&gt;&lt;/textarea&gt;
  </code></pre>