diff --git a/documentation/docs/06-runtime/03-lifecycle-hooks.md b/documentation/docs/06-runtime/03-lifecycle-hooks.md
index 56ce8e1cdd..c8699e1f6d 100644
--- a/documentation/docs/06-runtime/03-lifecycle-hooks.md
+++ b/documentation/docs/06-runtime/03-lifecycle-hooks.md
@@ -67,12 +67,13 @@ While there's no "after update" hook, you can use `tick` to ensure that the UI i
 
 ```svelte
 <script>
-	import { beforeUpdate, tick } from 'svelte';
+	import { tick } from 'svelte';
 
-	beforeUpdate(async () => {
+	$effect.pre(() => {
 		console.log('the component is about to update');
-		await tick();
-		console.log('the component just updated');
+		tick().then(
+				console.log('the component just updated');
+		);
 	});
 </script>
 ```