JavaScript All-in-One For Dummies

Chapter 5

Using the Component Lifecycle

IN THIS CHAPTER

Listening for Svelte’s lifecycle events (or just listening for lifecycle events)

Overriding Svelte’s lifecycle methods

Making HTTP Requests with fetch()

Running asynchronous code

“Nature is a machine. The family is a machine. The life cycle is like a machine.”

—RAY DALIO

In this chapter, I get into some of the more advanced features of Svelte, including using component lifecycle methods and running asynchronous code from within Svelte components.

The Svelte Lifecycle

Svelte's lifecycle starts with mounting and ends with destroying.

Mounting

As with the other frameworks I've described, mounting starts with the creation of an instance of the component and is complete when the component is active in the DOM. Mounting happens only once in the lifecycle of a component instance.

Svelte provides a method called onMount() that you can use to call a function when a component instance mounts. The onMount() function takes a callback function as its argument, and this callback is run as soon as the component instance has finished mounting. ...