✳flâneur — a map of the web's best reading

Lifecycle / tick • Svelte Tutorial

learn.svelte.dev · 889 words · saved by 1 readers

The tick 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). When you update component state in Svelte, it doesn't update the DOM immediately. Instead, it waits until the next microtask to see if there are any other changes that need to be applied, including in other components. Doing so avoids unnecessary work and allows the browser to batch things more effectively. You can see that behaviour in this example. Select a range of text and hit the tab key. Because the value changes, the current selection is cleared and the cursor jumps, annoyingly, to the end. We can fix this by importing tick... ...and running it immediately before we set this.selectionStart and this.selectionEnd at the end of handleKeydown: Next: Stores

Lifecycle hooks • Svelte Docs Skip to main content Tutorial Packages Playground Blog On this page In Svelte 5, the component lifecycle consists of only two parts: Its creation and its destruction. Everything in-between — when certain state is updated — is not related to the component as a whole; only the parts that need to react to the state change are notified. This is because under the hood the smallest unit of change is actually not a component, it's the (render) effects that the component sets up upon component initialization. Consequently, there's no such thing as a "before update"/"after

Explore this link on the map →

related reading