Svelte Lifecycle Method - beforeUpdate

In Svelte, a component's beforeUpdate lifecycle method is called before 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 beforeUpdate lifecycle method is called before any updates to the DOM are made. Once the beforeUpdate lifecycle method finishes executing, the DOM will be updated with these data changes, which will allow the subsequent call to afterUpdate 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 scrollTop, can be cached prior to being updated. Then, these cached values can be used to revert those properties back to what they were originally.

Here's a template of how the beforeUpdate lifecycle method is used inside of a component:

Note: beforeUpdate is called before the component's initial onMount.

Below, I'm going to show you:

• The versatility of hooking into the pre-DOM update lifecycle phase.

• A demo that demonstrates a practical use case for beforeUpdate.

Use Case - Restore Input Cursor Position#

Suppose you are formatting text within an editable element, such as an <input /> or <textarea /> 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 beforeUpdate lifecycle method:

Demo - beforeUpdate Lifecycle Method - Restore Input Cursor Position

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

• "Uppercase" - Replaces the selection with all of its letters uppercased.

• "Lowercase" - Replaces the selection with all of its letters lowercased.

• "Asterisks" - Replaces the selection with asterisks (each character is replaced with one asterisk).

• "Blocks" - Replaces the selection with blocks (each character is replaced with one block).

When any one of these buttons is clicked while there is a text selection in the input field, the transformText function is called. This function transforms the text selection and sets value to the newly transformed text. Because value is updated with a new value, the beforeUpdate lifecycle method will be called, which checks if input exists (since beforeUpdate 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 value is rendered within the input field, the afterUpdate 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.

Next Steps#

If you have built React applications, then you will have probably noticed how beforeUpdate can be used similarly to getDerivedStateFromProps/shouldComponentUpdate/getSnapshotBeforeUpdate. Try rewriting some of the those components that use getDerivedStateFromProps/shouldComponentUpdate/getSnapshotBeforeUpdate as Svelte components that use beforeUpdate. Because beforeUpdate is often used in tandem with afterUpdate, check out the afterUpdate blog post for more examples using beforeUpdate.

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

Source#

• Svelte Documentation

• Medium Editor Demo