 the component is updated as a result of a state change. When the value of any of a component's props and variables changes, the component's 

 lifecycle method is executed prior to any DOM updates being made in response to these changes. Once the 

 lifecycle method is finished running, the DOM is updated to reflect the data changes. After completing this update, the 

 lifecycle method is executed. Being able to schedule a callback to run at this phase of a component's lifecycle ensures that the DOM is completely updated and synced with any new state and prop values.

 lifecycle method is used inside of a component:

 lifecycle method, remember that it runs on every state and prop change. For components that experience many state and prop changes, it can be quite cumbersome to track which variables/props have changed in order to then execute the appropriate code. This is unlike React's 

, which provides the previous props and state as arguments.

The Markdown syntax formats plain text into structured content that can be published to the web as valid HTML markup. Commonly, developers write API documentation and blog posts using Markdown. To avoid typos and inconsistencies while writing Markdown, tools and editors have been built to instantly live preview the rendered output of Markdown content.

Visit this simple Svelte REPL demo to see how to live preview Markdown using the 

 element on the left for writing Markdown and a 

 container element on the right for rendering the output of the Markdown. 

 method that accepts Markdown as an argument and returns the generated HTML as a string. This HTML string can be rendered as HTML using the 

Anytime an HTML string is rendered via the 

 template syntax, the HTML string should be sanitized (before rendering) to prevent cross-site scripting, especially if the original source is untrusted. Pass the result of 

 lifecycle method, which will take this value and convert it to stringified HTML that is sanitized. This result will be rendered as HTML. As you type Markdown into the 

, the output of the Markdown will be displayed and live updated, giving you immediate feedback on your Markdown.

: Alternatively, this same behavior can be achieved by using a reactive statement.

Many websites provide a theme toggle to dynamically change their appearance based on a user's color preferences. To implement theming, use 

 and change the value of those variables whenever a different theme is selected.

Visit this simple Svelte REPL demo to see how to toggle themes using the 

These theme values are pre-defined in an object 

, and whenever any of these two buttons are clicked, the 

 lifecycle method is called, and the values of the CSS variables are updated accordingly.

 lifecycle method would not be called because the 

 object would not referenced anywhere in the HTML markup of the component.

Use Case #3 - Auto-Adjust Scroll Position in Messaging Client

From top to bottom, chat clients display messages in ascending order of their timestamp, with the oldest messages at the top and the most recent messages at the bottom adjacent to the "Send Message" input field. When a new message is received within a chat client, the user is automatically scrolled to that message at the bottom of the scrollable view, assuming that they haven't scrolled beyond a certain threshold that indicates the user browsing through older messages.

Visit this simple Svelte REPL demo to see how chat clients auto-adjust a user's scroll position upon receiving a new message using the 

 Lifecycle Method - Auto-Adjust Scroll Position in Messaging Client

In this demo, there are two chat clients, one for a user named "Jesse" and another for a user named "Alex." Whenever any one of these two users sends a message, the message will be displayed in both clients since these messages are based on a conversation between these two users. Messages sent by the user are styled with a blue background and white text, while messages received by the user are styled with a light-grey background and black text. The 

import { writable } from 'svelte/store';

const { subscribe, set, update } = writable({
  messages: [
    { senderId: '110a46bc-b78f-4e56-b948-ca6f087c9398', receiverId: '5de05c95-7bb1-4a87-87ff-e1a46f837ca8', body: 'Hey Alex!' },
    { senderId: '110a46bc-b78f-4e56-b948-ca6f087c9398', receiverId: '5de05c95-7bb1-4a87-87ff-e1a46f837ca8', body: 'I\'m about to finish this week\'s blog post. Can you review it?' },
    { senderId: '5de05c95-7bb1-4a87-87ff-e1a46f837ca8', receiverId: '110a46bc-b78f-4e56-b948-ca6f087c9398', body: 'Sure. I\'ll review it in an hour.' }
  ],
  users: [
    { id: '110a46bc-b78f-4e56-b948-ca6f087c9398', name: 'Jesse' },
    { id: '5de05c95-7bb1-4a87-87ff-e1a46f837ca8', name: 'Alex' }
  ]
});

export const chat = {
  subscribe,
  set,
  update,
  addMessage: value => update(self => {
    self.messages = self.messages.concat(value);
		
    return self;
  })
};

When the user submits a new message, the 

 method will be called to concatenate a new message to the 

 array, and the input field where the user types messages will be cleared.

function handleOnSubmit(evt) {
  evt.preventDefault();
  
  chat.addMessage({
    senderId: sender.id,
    receiverId: receiver.id,
    body: input.value
  });
  
  input.value = '';
}

 array is modified (and is used to render messages), the 

 is called to determine whether or not to automatically scroll the user to the bottom of the 

) to see the new message. If the user is within 

 of the bottom-most scroll position of this container element, then the 

, and the client will automatically scroll to the bottom of this container element so that the user can see the latest received message. This must be done before the DOM is updated with the new message because adding a new message will increase the 

 threshold (due a message's minimum height), and thus, cause the calculation to keep assuming that you are browsing through older messages even though you are not. 

Once the DOM is updated with the new message, the 

 lifecycle method will be called, and it will scroll to the bottom of the container depending on the value of the 

Use Case #4: Custom Svelte Action - Shuffle Animation

To animate an element, the element must sequentially transition from a starting state to an ending state. For example, you may want to move a square from the top-left corner (starting state) of a view to the bottom-right corner (ending state) of a view. In between these two states, there may be intermediate states that the element must fulfill. For example, maybe you want the square to move in a zig-zag motion towards the bottom-right corner rather than in a straight diagonal motion. Additionally, parameters such as 

Referring back to the square example, each step in the animation requires knowing the most recent 

 coordinates of the square's position and the 

 coordinates of the square's next position in the zig-zag motion. And this continues on for each adjacent pair of steps in the animation sequence. At each step, you would cache the current coordinates of the square and calculate the difference between these coordinates and the next coordinates of the square. 

Using the calculated displacement (and other parameters like the ones mentioned previously), the square can be animated from point A to point B. 

In Svelte, animating an element can be done using the 

 lifecycle methods. The below snippet of code is based on a 

 lifecycle method, before each DOM update, the current coordinates (

 lifecycle method, after each DOM update, the cached coordinates are subtracted from the current coordinates to determine how far away these coordinates are from one another (

Visit this Svelte REPL demo to see this in action:

 Lifecycle Method - Custom Svelte Action - Shuffle Animation

: This demo is based on the Svelte Summit 2020 demo.

In this demo, pressing the "Shuffle" button randomly rearranges the cat pictures in a two column masonry grid layout (columns are 

 in width). The pictures are smoothly translated from one slot to another.

 element is attached element-level lifecycle methods via a Svelte 

These methods are called when the element is created, destroyed, etc.

const translate = {
  action: (node, { duration, spring }) {
    // Executed when the node has been mounted (similar to `onMount`).

    return {
      destroy() {
        // Executed when the node has been mounted (similar to `onDestroy`).
      }
    }
  }
};

 function, which contains the exact same code as previously mentioned with the 

export const translate = {
  action: translateElement,
  flush: syncLayout.flush
}

function translateElement(node, { duration, spring }) {
  const rect  = node.getBoundingClientRect();
	
  let w = rect.width;
  let h = rect.height;
  let x = rect.x;
  let y = rect.y;
	
  let animation;
	
  beforeUpdate(() => {
    if (animation && animation.playState === "running") {
      const rect = node.getBoundingClientRect();
      w = rect.width;
      h = rect.height;
      x = rect.x;
      y = rect.y;

      if (animation && animation.playState === "running") { 
        animation.cancel();
      }
    }
  })
	
  afterUpdate(() => {
    let dx = 0;
    let dy = 0;
		
    syncLayout.read(() => {
      const rect = node.getBoundingClientRect();
      dx = x - rect.x;
      dy = y - rect.y;

      x = rect.x;
      y = rect.y;
    })
		
    syncLayout.write(() => {
      const keyframeFn = spring ? createSpringAnimation : createKeyframes;
      const { keyframes, frames } = keyframeFn({ dx, dy });
      animation = node.animate(keyframes, {
        duration: spring ? (frames / 60) * 1000 : duration
      })
    });
  });

  return {
    update(config) {
      duration = config.duration;
      spring = config.spring;
    },
    destroy() {
      // The node has been removed from the DOM.
    }
  };
}

If you continuously press the "Shuffle" button, then the pictures will be shuffled around until the "Shuffle" button is no longer pressed, at which point, the pictures will be able to animate to their designated new slots. This "shuffling around" behavior is made possible by the following code that uses the 

 function is called ensure that all pending state changes have been reflected to the DOM. Then, 

 executes all of the animation steps queued via the 

 function. This allows the translation animation to be ran smoothly irregardless of interruptions.

If this block of code was commented out, then the pictures would "blink" immediately to their designated new slots.

: Alternatively, you can use one of Svelte's built-in 

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 - afterUpdate

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript