Lifecycles

Hello there, fellow Svelte enthusiasts!
Today, we're exploring lifecycles. Lifecycles are essentially functions that run at specific points in a component's existence, allowing you to control its behavior during initialization, updates, and deconstruction.

The most common function you will be using to run code at key moments is onMount which runs after the component is first rendered to the DOM.

You can leverage onMount to execute actions that depend on the component being fully rendered in the DOM, such as starting animations or setting up interactive elements.

The script function schedules work to happen immediately before the DOM is updated. afterUpdate is its counterpart, used for running code once the DOM is in sync with your data.

Together, they're useful for doing things imperatively that are difficult to achieve in a purely state-driven way, like updating the scroll position of an element.

Before the DOM updates, the beforeUpdate message appears: "Input is about to be validated."

After a 500ms delay, the afterUpdate message appears: "Input has been validated," along with the validation result.

Thetick function is unlike other lifecycle functions in that you can call it any time, not just when the component first initialises. It returns a promise that resolves as soon as any pending state changes have been applied to the DOM (or immediately, if there are no pending state changes).

In Svelte, when you update component state, the framework doesn't immediately update the DOM to optimize performance.
Instead, it waits for a brief moment (a "microtask") to see if there are any other changes that need to be applied, including in other components. This batching approach helps avoid unnecessary DOM updates and improves performance.

To ensure that the DOM is updated immediately after the textarea value changes, you can use the tick function from Svelte. The tick function forces Svelte to process any pending state changes and update the DOM.
By adding await tick() after updating the textarea value, you guarantee that the DOM will be updated before the selection is restored, preventing the cursor from jumping to the end.