Skip to main content
Deprecated: Use $effect.pre instead. This function only works in legacy mode.
Schedules a callback to run immediately before the component is updated after any state change. The first time the callback runs will be before the initial onMount.

​
Signature

function beforeUpdate(fn: () => void): void
​
fn
function
required
A function to run before the component updates.

​
Usage

<script>
  import { beforeUpdate } from 'svelte';

  beforeUpdate(() => {
    console.log('component is about to update');
  });
</script>

​
Migration to runes

In runes mode, use $effect.pre instead:

​
Before (legacy mode)

<script>
  import { beforeUpdate } from 'svelte';

  let count = 0;

  beforeUpdate(() => {
    console.log('count is about to update:', count);
  });
</script>

<button on:click={() => count++}>
  clicks: {count}
</button>

​
After (runes mode)

<script>
  let count = $state(0);

  $effect.pre(() => {
    console.log('count is about to update:', count);
  });
</script>

<button onclick={() => count++}>
  clicks: {count}
</button>

​
Key differences

  • beforeUpdate only works in legacy mode (non-runes components)
  • $effect.pre is the runes-mode equivalent
  • $effect.pre runs before DOM updates, similar to beforeUpdate
  • The first run of beforeUpdate happens before onMount

​
Notes

  • Only works in legacy mode
  • Runs before every component update
  • First run is before the initial onMount
  • Does not run during server-side rendering