beforeUpdate and afterUpdate in Svelte - Performance & Optimization

Performance: beforeUpdate and afterUpdate

MEDIUM IMPACT

These lifecycle hooks affect the rendering performance by running code before and after the DOM updates, impacting interaction responsiveness and visual stability.

Running heavy computations or DOM manipulations inside beforeUpdate or afterUpdate hooks

Svelte

import { beforeUpdate, afterUpdate } from 'svelte';
beforeUpdate(() => {
  // minimal logic, defer heavy work
  requestIdleCallback(() => {
    // heavy task deferred
  });
});
afterUpdate(() => {
  // batch DOM style changes or use CSS classes instead
  document.body.classList.add('updated');
});

Deferring heavy work avoids blocking rendering; batching style changes reduces reflows and repaints.

📈 Performance GainNon-blocking rendering; single reflow and repaint

Running heavy computations or DOM manipulations inside beforeUpdate or afterUpdate hooks

Svelte

import { beforeUpdate, afterUpdate } from 'svelte';
beforeUpdate(() => {
  // heavy synchronous task
  for(let i=0; i<1000000; i++) {}
});
afterUpdate(() => {
  document.querySelectorAll('.item').forEach(el => {
    el.style.width = '100px';
  });
});

Heavy synchronous tasks block the main thread delaying rendering and cause multiple reflows due to style changes after DOM updates.

📉 Performance CostBlocks rendering for 50-100ms; triggers multiple reflows and repaints

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Heavy synchronous code in beforeUpdate/afterUpdate	Multiple DOM reads/writes	Multiple reflows triggered	High paint cost due to style changes	[X] Bad
Lightweight hooks with deferred heavy work	Minimal DOM operations	Single or no reflow	Low paint cost with CSS batching	[OK] Good

Rendering Pipeline

beforeUpdate runs before the DOM updates, allowing preparation without blocking layout. afterUpdate runs after DOM updates, often triggering style recalculations and repaints if DOM is manipulated.

→JavaScript Execution

→Layout

→Paint

→Composite

⚠️ BottleneckJavaScript Execution and Layout due to synchronous heavy tasks or style changes in hooks

Core Web Vital Affected

INP, CLS

These lifecycle hooks affect the rendering performance by running code before and after the DOM updates, impacting interaction responsiveness and visual stability.

Optimization Tips

1Keep beforeUpdate and afterUpdate hooks lightweight to avoid blocking rendering.

2Defer heavy computations using requestIdleCallback or setTimeout.

3Batch DOM style changes and prefer CSS class toggling to minimize reflows.

Performance Quiz - 3 Questions

What is a main performance risk when running heavy synchronous code inside beforeUpdate in Svelte?

A It increases bundle size significantly

B It blocks rendering and delays user interaction responsiveness

C It causes network requests to slow down

D It improves Largest Contentful Paint (LCP)

DevTools: Performance

How to check: Record a performance profile while interacting with the component using beforeUpdate and afterUpdate hooks. Look for long scripting tasks and layout shifts.

What to look for: Long JavaScript execution blocks during lifecycle hooks and multiple layout recalculations indicate poor performance.

Practice

1. What is the main purpose of the beforeUpdate lifecycle function in Svelte?

easy

A. To run code only once when the component mounts

B. To run code after the component is destroyed

C. To run code just before the DOM updates

D. To run code after the DOM updates

Solution

1. Step 1: Understand lifecycle timing

   The beforeUpdate function runs right before the DOM changes are applied.

2. Step 2: Compare with other lifecycle functions

   afterUpdate runs after DOM updates, and onDestroy runs when the component is removed.

3. Final Answer:

   To run code just before the DOM updates -> Option C

4. Quick Check:

   beforeUpdate = runs before DOM changes [OK]

Hint: beforeUpdate runs before DOM changes, afterUpdate runs after [OK]

Common Mistakes:

• Confusing beforeUpdate with afterUpdate
• Thinking beforeUpdate runs only once
• Mixing lifecycle with component mounting or destruction

2. Which of the following is the correct syntax to import and use beforeUpdate in a Svelte component?

easy

A. import { beforeUpdate } from 'svelte'; beforeUpdate = () => { console.log('Before update'); };

B. import beforeUpdate from 'svelte'; beforeUpdate(() => { console.log('Before update'); });

C. import { beforeUpdate } from 'svelte'; function beforeUpdate() { console.log('Before update'); }

D. import { beforeUpdate } from 'svelte'; beforeUpdate(() => { console.log('Before update'); });

Solution

1. Step 1: Check import syntax

   The correct import uses curly braces: import { beforeUpdate } from 'svelte';

2. Step 2: Check usage syntax

   beforeUpdate is called as a function with a callback: beforeUpdate(() => { ... });

3. Final Answer:

   import { beforeUpdate } from 'svelte'; beforeUpdate(() => { console.log('Before update'); }); -> Option D

4. Quick Check:

   Correct import and callback usage = import { beforeUpdate } from 'svelte'; beforeUpdate(() => { console.log('Before update'); }); [OK]

Hint: Import with braces and call beforeUpdate(callback) [OK]

Common Mistakes:

• Importing without braces
• Assigning beforeUpdate instead of calling it
• Defining a function named beforeUpdate instead of using the imported one

3. Consider this Svelte component code snippet:

import { beforeUpdate, afterUpdate } from 'svelte';

let count = 0;
beforeUpdate(() => {
  console.log('Before:', count);
});
afterUpdate(() => {
  console.log('After:', count);
});

function increment() {
  count += 1;
}

What will be logged to the console after calling increment() once?

medium

A. Before: 0
After: 1

B. Before: 1
After: 1

C. Before: 0
After: 0

D. Before: 1
After: 0

Solution

1. Step 1: Understand when beforeUpdate runs

   The beforeUpdate callback runs before the DOM updates but after the state change. However, the console.log inside beforeUpdate logs the current value of count before the DOM updates, which is the updated value.

2. Step 2: Understand when afterUpdate runs

   The afterUpdate callback runs after the DOM updates, logging the updated value of count.

3. Step 3: Trace the logs

   When increment() is called, count is incremented to 1. Then beforeUpdate runs and logs Before: 0 because the DOM hasn't updated yet, but the variable has changed. Then afterUpdate runs and logs After: 1.

4. Final Answer:

   Before: 0 After: 1 -> Option A

5. Quick Check:

   beforeUpdate logs old DOM state, afterUpdate logs new DOM state [OK]

Hint: beforeUpdate logs old DOM state, afterUpdate logs new DOM state [OK]

Common Mistakes:

• Thinking beforeUpdate logs new value
• Confusing order of logs
• Thinking afterUpdate logs old value

4. This Svelte code tries to log messages before and after updates:

import { beforeUpdate, afterUpdate } from 'svelte';

beforeUpdate = () => console.log('Before update');
afterUpdate(() => console.log('After update'));

What is the problem with this code?

medium

A. afterUpdate is not imported correctly

B. beforeUpdate is overwritten instead of called as a function

C. Missing semicolon after beforeUpdate assignment

D. No problem, code works fine

Solution

1. Step 1: Analyze beforeUpdate usage

   The code assigns a new function to beforeUpdate, overwriting the imported function instead of calling it.

2. Step 2: Check afterUpdate usage

   afterUpdate is correctly called as a function with a callback.

3. Final Answer:

   beforeUpdate is overwritten instead of called as a function -> Option B

4. Quick Check:

   Use beforeUpdate(callback), not assignment [OK]

Hint: Call beforeUpdate(callback), don't assign it [OK]

Common Mistakes:

• Assigning lifecycle functions instead of calling them
• Ignoring import correctness
• Assuming missing semicolon causes error here

5. You want to update a variable status right before the DOM updates and log the new status right after the DOM updates in a Svelte component. Which code snippet correctly achieves this?

hard

A. import { beforeUpdate, afterUpdate } from 'svelte';
beforeUpdate(() => { status = 'updating'; });
afterUpdate(() => { console.log('Status:', status); });

B. import { beforeUpdate, afterUpdate } from 'svelte';
afterUpdate(() => { status = 'updating'; });
beforeUpdate(() => { console.log('Status:', status); });

C. import { beforeUpdate, afterUpdate } from 'svelte';
beforeUpdate(() => { console.log('Status:', status); });
afterUpdate(() => { status = 'updating'; });

D. import { beforeUpdate, afterUpdate } from 'svelte';
beforeUpdate(() => { status = 'updated'; });
afterUpdate(() => { console.log('Status:', 'updating'); });

Solution

1. Step 1: Set variable before DOM updates

   Use beforeUpdate to assign status = 'updating' before the DOM changes.

2. Step 2: Log variable after DOM updates

   Use afterUpdate to log the current status after the DOM updates.

3. Final Answer:

   import { beforeUpdate, afterUpdate } from 'svelte'; beforeUpdate(() => { status = 'updating'; }); afterUpdate(() => { console.log('Status:', status); }); -> Option A

4. Quick Check:

   Update before, log after update [OK]

Hint: Update state in beforeUpdate, log in afterUpdate [OK]

Common Mistakes:

• Swapping beforeUpdate and afterUpdate roles
• Logging before updating the variable
• Using wrong status strings causing confusion