Lifecycle of the Svelte Component

Understanding lifecycle of component is important to implement.

Jangwook Kim
Apr 17 · 2 min read
Logo of the Svelte

This post is one of Svelte Tutorial series.

  1. Up and running with Svelte
  2. How to handle Events in Svelte
  3. How binding data into Svelte Component
  4. [This Post] Lifecycle of the Svelte Component

The svelte has some lifecycle functions.

Lifecycle of the Svelte Component
  1. onMount: runs after the component is first rendered to the DOM.
  2. onDestroy: runs when the component is destroyed.
  3. beforeUpdate: runs before the DOM has been updated.
  4. afterUpdate: runs after the DOM has been updated(It's counterpart of the beforeUpdate).
  5. tick: unlike other functions(I'll describe at the last part of this post).

Result

It’s interesting that onDestroy function of the child component runs after parent component’s.


The tick is special function. It can be called any time unlike other lifecycle functions except when the component first initializes.

It returns a promise that resolves as soon as any pending state changes have been applied to the DOM.

We have launched three new publications! Show some love for our new publications by following them: AI in Plain English, UX in Plain English, Python in Plain English — thank you and keep learning!

We are also always interested in helping to promote quality content. If you have an article that you would like to submit to any of our publications, send us an email at submissions@plainenglish.io with your Medium username and we will get you added as a writer. Also let us know which publication/s you want to be added to.

JavaScript In Plain English

New articles every day.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store