 the component is removed from the DOM. For example, if you have a component that is wrapped within an 

 block and it is currently rendered to the DOM, then when this block's conditional statement evaluates to 

, the component will be unmounted from the DOM, at which point 

 will be called. Being able to schedule a callback to run at this phase of a component's lifecycle ensures that cleanup-related operations can be ran and previous application states can be resumed.  

 lifecycle method is used inside of a component:

 covers a wide diversity of use cases such as...

Use-Case #1 - Returning Focus to Element That Opened Modal Dialog

When a modal dialog is closed, the focus should return back to the element that opened the modal dialog. Not doing so would hurt the experience of users who rely on keyboards and/or assistive technologies to navigate through webpages. To rescue the focus:

Visit this simple Svelte REPL demo to see how to refocus a previous element using the 

When the "Open Modal" button is clicked, it sets the 

 component to be rendered to the page. When an instance of the 

, which references the most-recently focused element (the "Open Modal" button). 

Notice that the "Close Modal" button in the modal dialog is focused due to its 

 attribute. When you click the "Tab" key, the focus is trapped within the modal dialog (each press moves the focus to each link, followed by the "Close Modal" button, and back, repeating in a cycle), which prevents the focus from escaping the modal dialog.

When you press the "ESC" key or click the "Close Modal" button, then the "close" event is dispatched, which will execute the 

 and remove the modal dialog from the DOM. Before the modal dialog is unmounted, the callback passed to 

 will be ran. The focus will resume back to the previously focused element, the "Open Modal" button.

 element (where the Svelte REPL displays the result of the Svelte code). In the demo, a reference to the "Open Modal" button is passed to the 

 component as a prop, and it is manually used as the previously focused element if 

Removing event listeners is necessary for avoiding memory leaks in older browsers that don't automatically garbage-collect event handlers of removed DOM elements. A common pattern for registering and unregistering event listeners in Svelte is to perform these actions during the 

Visit this simple Svelte REPL demo to see how to remove event listeners in your Svelte application using the 

 Lifecycle Method - Removing Event Listeners (Window Resize)

Resizing the window updates the printed width value. By debouncing the event handler, the resize event listener will only call the event handler after the resize event has stopped firing for 300ms. Limiting the rate at which the event handler is executed will yield performance gains, especially in much larger applications. 

 lifecycle method, press the "Toggle" button to toggle off the 

 component. This will remove the registered resize event listener on the 

 object. If, instead, the event listener was binded to an element within the component, then the event listener can be binded to the element in 

 since the element will have been rendered by the time 

 is called. Likewise, the event listener can be removed from the element in 

 occurs just before the element is removed from the DOM, which means the element still exists when removing this event listener.

To understand how a UI change can affect a user's engagement with your application, you might collect a set of metrics, such as bounce rate and average session duration, via 

 or software custom-built to log this information. A simple metric to integrate into your application is tracking how long a user stays on a page. A rudimentary implementation of this would involve starting a timer the moment the user visits the page, and then stopping the timer the moment they exit the page.

Visit this simple Svelte REPL demo to see how to log user activity in your Svelte application using the 

 Lifecycle Method - Logging User Activity

In this example, each tab represents a "subreddit," a topic-specific, online community on 

). Clicking on any of these tabs will display a list containing the most popular articles for the corresponding subreddit. 

 component is mounted anytime the user clicks on any of the subreddit tabs. Upon switching from one subreddit to another, the current 

 prop is passed to ensure the articles for the currently selected subreddit are loaded. 

 component is created, this represents the user landing on a new "page," and a timer begins to mark this (

). Once the user leaves the "page" (switching to a new subreddit), the 

 lifecycle method is called, and the difference between the time at which the component is unmounted and the recorded start time is calculated. This difference represents how long the user was on this subreddit before leaving. After performing this calculating, the difference can be sent to an API endpoint to be stored. All of the data collected can then be aggregated and viewed inside of a dashboard. 

Use-Case #4 - Scheduling Store Unsubscriptions

Typically, in component-based architectures, data flows downwards from parents to children (unidirectional). In Svelte, 

 allow data to be shared between components, regardless of their relationship in the component hierarchy. A store contains a 

 method that notifies components of changes to the store's value. When the 

 method is returned, which cancels a component's subscription to a store when called.

Visit this simple Svelte REPL demo to see how to unsubscribe from a Svelte store subscription using the 

 Lifecycle Method - Scheduling Store Unsubscriptions

 component (the list of subreddit articles) both subscribed to a store named 

import { writable } from 'svelte/store';

const { subscribe, set, update } = writable({
  subreddits: [
    'science',
    'technology',
    'worldnews'
  ],
  currentSubreddit: 'science'
});

export const reddit = {
  subscribe,
  set,
  update,
  setCurrentSubreddit: value => update(self => {
    self.currentSubreddit = value;
		
    return self;
  })
};

 represents the currently selected subreddit (by default, it is r/science). Because the value of 

 store, which means two additional methods are provided alongside the 

 (sets a new value for the store and synchronously executes every active subcription method of the store) and 

 (updates a value based on the current value in the store). For convenience, a custom method, 

, is made available, and it directly updates the 

 value. All components subscribed to the store will see the changes. In this case, both the 

 components are subscribed to the store for changes to 

Imagine a scenario in which a component is mounted/unmounted many times throughout the lifetime of the application. If 

 is not called upon unmounting the component, then its corresponding subscription will still be alive and will be executed upon future updates to the store even when the component the subscription is tied to has been unmounted. Try this out by commenting out the 

 statement inside of the subscription function. As you switch tabs from one subreddit to another, watch as more and more messages are printed inside of the console.

With so many subscriptions still in memory and not garbage-collected, eventually, this will cause a memory leak.   

: Subscribing to the store and adding a call to the 

 method inside of many components that rely on the store can become tedious and resemble repetitive boilerplate code. Instead, just import the store and prefix a store value with a 

 to it. The auto-subscription shorthand will allow components to auto-subscribe to the store and automatically unsubscribe from it when the component is destroyed. Check out the 

 component for an auto-subscription example.

Use-Case #5 - Performing "Clean-Up Duties" for External/Third-Party Libraries

For third-party libraries such as Leaflet.js that embed interactive maps into an application, the provide methods for "cleaning-up" when they are removed from the DOM.  For example, in the case of Leaflet.js, the 

 method destroys the map and its layers and clears all of their corresponding event listeners.

Visit this simple Svelte REPL demo to see how to clean-up an embedded Leaflet map in your Svelte application using the 

 Lifecycle Method - Clean-Up External/Third-Party Libraries

 lifecycle method is called and initializes a new map on a specified container element. Additionally, a marker icon is displayed, and an event listener is added to this icon. Whenever the icon is clicked, a popup opens above it. Once the map is toggled off, the 

 lifecycle method is called and destroys the map and the marker and clears all of their corresponding event listeners such as zooming in the map, the opening of the marker icon's popup on clicking, etc.

When server-side rendering a Svelte application, only one lifecycle method is called: 

 is called after the application is rendered.

For example, when building the static version of a 

 is called. To verify this, simply add a 

 statement into each lifecycle method call and observe the outputted logs in the CLI.

If you have built React applications, then you will have probably noticed how similar 

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Svelte Lifecycle Method - onDestroy

Tags

Responses (2)

Masterclasses

Tutorials

Fullstack React with TypeScript