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:
beforeUpdate is called before the component's initial
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
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:
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.
If you have built React applications, then you will have probably noticed how
beforeUpdate can be used similarly to
getSnapshotBeforeUpdate. Try rewriting some of the those components that use
getSnapshotBeforeUpdate as Svelte components that use
beforeUpdate is often used in tandem with
afterUpdate, check out the
afterUpdate blog post for more examples using
If you want to learn more about Svelte, then check out Fullstack Svelte: