 the component is updated as a result of a state change. When the component receives new prop values or has its local state modified, the component's 

 lifecycle method is called before any updates to the DOM are made. Once the 

 lifecycle method finishes executing, the DOM will be updated with these data changes, which will allow the subsequent call to 

 to have access to a completely synced DOM. Being able to schedule a callback to run at this phase of a component's lifecycle ensures that the value of certain DOM properties, such as a container element's 

, can be cached prior to being updated. Then, these cached values can be used to revert those properties back to what they were originally.

 lifecycle method is used inside of a component:

 is called before the component's initial 

Suppose you are formatting text within an editable element, such as an 

 via a set of controls in a floating tooltip. When you create a selection by dragging your cursor over a subset of the text and click on any one of the tooltip options to transform the text, the selected text should be modified with the selection and focus on the editable element still intact. 

By default, clicking anywhere outside of an editable element will cause it to lose its focus and current text selection. This does not happen when clicking on any of the buttons in the tooltip because of additional code that preserves the selection and focus. 

Visit this simple Svelte REPL demo to see how both the focus and text selection can be immediately restored using the 

 Lifecycle Method - Restore Input Cursor Position

In this demo, there are four buttons, each of which transform the input field's text selection differently:

When any one of these buttons is clicked while there is a text selection in the input field, the 

 function is called. This function transforms the text selection and sets 

 lifecycle method will be called, which checks if 

 is called before the component is mounted) and caches the start and end positions of the text selection. After the DOM is updated and the new 

 is rendered within the input field, the 

 lifecycle method will be called, which will recreate the text selection based on the cached positions and place the focus back on the input field. 

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

. Try rewriting some of the those components that use 

If you want to learn more about Svelte, then check out 

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Svelte Lifecycle Method - <code>beforeUpdate</code></h1><p>In Svelte, a component's <strong><code><a href="https://svelte.dev/docs#beforeUpdate" rel="noopener noreferrer nofollow">beforeUpdate</a></code></strong><a href="https://svelte.dev/docs#beforeUpdate" rel="noopener noreferrer nofollow"> lifecycle method</a> is called <em>before</em> the component is updated as a result of a state change. When the component receives new prop values or has its local state modified, the component's <code>beforeUpdate</code> lifecycle method is called before any updates to the DOM are made. Once the <code>beforeUpdate</code> lifecycle method finishes executing, the DOM will be updated with these data changes, which will allow the subsequent call to <code>afterUpdate</code> to have access to a completely synced DOM. Being able to schedule a callback to run at this phase of a component's lifecycle ensures that the value of certain DOM properties, such as a container element's <code>scrollTop</code>, can be cached prior to being updated. Then, these cached values can be used to revert those properties back to what they were originally.</p><p>Here's a template of how the <code>beforeUpdate</code> lifecycle method is used inside of a component:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-wrHveGxJH85dTvxV2u1H4" id="cm-wrHveGxJH85dTvxV2u1H4">&lt;script&gt;
  import { beforeUpdate } from 'svelte';

  beforeUpdate(() =&gt; {
    // ...
  });
&lt;/script&gt;</textarea><p><em>Note</em>: <code>beforeUpdate</code> is called before the component's initial <code>onMount</code>.</p><p>Below, I'm going to show you:</p><ul><li><p>The versatility of hooking into the pre-DOM update lifecycle phase.</p></li><li><p>A demo that demonstrates a practical use case for <code>beforeUpdate</code>.</p></li></ul><h2 class="heading-anchor-text" id="use-case-restore-input-cursor-position"><span>Use Case - Restore Input Cursor Position</span><a class="d-inline" href="#use-case-restore-input-cursor-position">#</a></h2><p>Suppose you are formatting text within an editable element, such as an <code>&lt;input /&gt;</code> or <code>&lt;textarea /&gt;</code> via a set of controls in a floating tooltip. When you create a selection by dragging your cursor over a subset of the text and click on any one of the tooltip options to transform the text, the selected text should be modified with the selection and focus on the editable element still intact. </p><figure class="photo figure-position-inline"><img src="https://www.dl.dropboxusercontent.com/s/vmkcwm1ro9bjoa4/medium-editor-formatting.gif" alt="Medium Editor - Selecting and Bolding Text" contenteditable="false"><div></div></figure><p>By default, clicking anywhere outside of an editable element will cause it to lose its focus and current text selection. This does not happen when clicking on any of the buttons in the tooltip because of additional code that preserves the selection and focus. </p><figure class="photo figure-position-inline"><img src="https://www.dl.dropboxusercontent.com/s/kyozys8vhdxg7yg/medium-editor-losing-focus.gif" alt="Medium Editor - Clicking Outside to Lose Focus and Selection" contenteditable="false"><div></div></figure><p>Visit this simple Svelte REPL demo to see how both the focus and text selection can be immediately restored using the <code>beforeUpdate</code> lifecycle method:</p><p><a href="https://svelte.dev/repl/2c36ef2a63d744038d50efd7bec2b6fb" rel="noopener noreferrer nofollow">Demo - </a><code><a href="https://svelte.dev/repl/2c36ef2a63d744038d50efd7bec2b6fb" rel="noopener noreferrer nofollow">beforeUpdate</a></code><a href="https://svelte.dev/repl/2c36ef2a63d744038d50efd7bec2b6fb" rel="noopener noreferrer nofollow"> Lifecycle Method - Restore Input Cursor Position</a></p><figure class="photo figure-position-inline"><img src="https://www.dl.dropboxusercontent.com/s/bd37rg5xmjea17h/Screen%20Shot%202021-01-29%20at%201.02.44%20AM.png" alt="Demo - `beforeUpdate` Lifecycle Method - Restore Input Cursor Position" contenteditable="false"><div></div></figure><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-EYu3sYv3k04OWVJJKHR1P" id="cm-EYu3sYv3k04OWVJJKHR1P">&lt;script&gt;
  import { afterUpdate, beforeUpdate } from 'svelte';
	
  let input = null;
  let value = '';
  let selectionStart = 0;
  let selectionEnd = 0;
	
  beforeUpdate(() =&gt; {
    if (input) {
      ({ selectionStart, selectionEnd } = input);
    }
  });
	
  afterUpdate(() =&gt; {
    input.setSelectionRange(selectionStart, selectionEnd);
    input.focus();
  });
	
  function transformText(mode) {
    const { selectionStart: start, selectionEnd: end } = input;
    let transformedText = value.slice(start, end); 
		
    switch(mode) {
      case 'uppercase':
        transformedText = transformedText.toUpperCase();
        break;  
      case 'lowercase':
        transformedText = transformedText.toLowerCase();
        break;
      case 'asterisks':
        transformedText = transformedText.replace(/./g, '*');
        break;
      case 'blocks':
        transformedText = transformedText.replace(/./g, '█');
        break;
    }
		
    value = `${value.slice(0, start)}${transformedText}${value.slice(end)}`;
  }
&lt;/script&gt;

&lt;!-- &lt;style /&gt; --&gt;

&lt;input type="text" bind:this={input} bind:value={value} /&gt;
&lt;p&gt;Modify selected text:&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;&lt;button type="button" on:click={() =&gt; transformText('uppercase')}&gt;Uppercase&lt;/button&gt;&lt;/li&gt;
  &lt;li&gt;&lt;button type="button" on:click={() =&gt; transformText('lowercase')}&gt;Lowercase&lt;/button&gt;&lt;/li&gt;
  &lt;li&gt;&lt;button type="button" on:click={() =&gt; transformText('asterisks')}&gt;Asterisks&lt;/button&gt;&lt;/li&gt;
  &lt;li&gt;&lt;button type="button" on:click={() =&gt; transformText('blocks')}&gt;Blocks&lt;/button&gt;&lt;/li&gt;
&lt;/ul&gt;</textarea><p>In this demo, there are four buttons, each of which transform the input field's text selection differently:</p><ul><li><p>"Uppercase" - Replaces the selection with all of its letters uppercased.</p></li><li><p>"Lowercase" - Replaces the selection with all of its letters lowercased.</p></li><li><p>"Asterisks" - Replaces the selection with asterisks (each character is replaced with one asterisk).</p></li><li><p>"Blocks" - Replaces the selection with blocks (each character is replaced with one block).</p></li></ul><p>When any one of these buttons is clicked while there is a text selection in the input field, the <code>transformText</code> function is called. This function transforms the text selection and sets <code>value</code> to the newly transformed text. Because <code>value</code> is updated with a new value, the <code>beforeUpdate</code> lifecycle method will be called, which checks if <code>input</code> exists (since <code>beforeUpdate</code> is called before the component is mounted) and caches the start and end positions of the text selection. After the DOM is updated and the new <code>value</code> is rendered within the input field, the <code>afterUpdate</code> lifecycle method will be called, which will recreate the text selection based on the cached positions and place the focus back on the input field. </p><h2 class="heading-anchor-text" id="next-steps"><span>Next Steps</span><a class="d-inline" href="#next-steps">#</a></h2><p>If you have built React applications, then you will have probably noticed how <code>beforeUpdate</code> can be used similarly to <code>getDerivedStateFromProps</code>/<code>shouldComponentUpdate</code>/<code>getSnapshotBeforeUpdate</code>. Try rewriting some of the those components that use <code>getDerivedStateFromProps</code>/<code>shouldComponentUpdate</code>/<code>getSnapshotBeforeUpdate</code> as Svelte components that use <code>beforeUpdate</code>. Because <code>beforeUpdate</code> is often used in tandem with <code>afterUpdate</code>, check out the <code><a href="https://www.newline.co/@kchan/svelte-lifecycle-method-afterupdate--61afc3c1" rel="noopener noreferrer nofollow">afterUpdate</a></code><a href="https://www.newline.co/@kchan/svelte-lifecycle-method-afterupdate--61afc3c1" rel="noopener noreferrer nofollow"> blog post</a> for more examples using <code>beforeUpdate</code>. </p><p>If you want to learn more about Svelte, then check out <a href="https://www.newline.co/courses/fullstack-svelte" rel="noopener noreferrer nofollow">Fullstack Svelte</a>:</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210220170609203_20210122223126406_fullstack-svelte.png" attachmentid="0c046963-4fe6-4651-bea9-7b71ec1d1213" contenteditable="false" data-width="440" data-height="248"><div></div></figure><h2 class="heading-anchor-text" id="source"><span>Source</span><a class="d-inline" href="#source">#</a></h2><ul><li><p><a href="https://svelte.dev/docs#beforeUpdate" rel="noopener noreferrer nofollow">Svelte Documentation</a></p></li><li><p><a href="https://yabwe.github.io/medium-editor/demo.html" rel="noopener noreferrer nofollow">Medium Editor Demo</a></p></li></ul><p></p>

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

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript