beforeUpdate and afterUpdate in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

Understanding beforeUpdate and afterUpdate execution order

Given the following Svelte component, what will be the order of console logs when the button is clicked once?

Svelte

  <script>
    import { beforeUpdate, afterUpdate } from 'svelte';
    let count = 0;

    beforeUpdate(() => {
      console.log('Before update:', count);
    });

    afterUpdate(() => {
      console.log('After update:', count);
    });

    function increment() {
      count += 1;
    }
  </script>

  <button on:click={increment}>Increment</button>
  <p>{count}</p>

A 1,2

B 2,1

C 1

D 2

💡 Hint

Remember that beforeUpdate runs before the DOM updates and afterUpdate runs after.

When the button is clicked, count changes from 0 to 1.

beforeUpdate runs before the DOM reflects this change, so it logs the old value 0.

afterUpdate runs after the DOM updates, so it logs the new value 1.

❓ state_output

intermediate

What is the value of message after update?

Consider this Svelte component. What will be the final value of message after the button is clicked once?

Svelte

  <script>
    import { beforeUpdate, afterUpdate } from 'svelte';
    let message = 'start';

    beforeUpdate(() => {
      message = 'before';
    });

    afterUpdate(() => {
      console.log('after');
    });

    function change() {
      message = 'changed';
    }
  </script>

  <button on:click={change}>Change</button>
  <p>{message}</p>

A "after"

B "before"

C "changed"

D "start"

💡 Hint

Think about the order of lifecycle hooks and how they modify message.

Clicking the button sets message to 'changed'.

Then beforeUpdate runs and sets it to 'before'.

After the DOM updates, afterUpdate runs and logs.

The final displayed value is 'before'.

📝 Syntax

advanced

Identify the syntax error in lifecycle hook usage

Which option contains a syntax error in using beforeUpdate or afterUpdate in Svelte?

A beforeUpdate { () => console.log('update') };

B afterUpdate(() => console.log('update'));

C beforeUpdate(() => { console.log('update'); });

D afterUpdate(() => { console.log('update'); });

💡 Hint

Check the parentheses and arrow function syntax carefully.

Option A uses curly braces instead of parentheses to call beforeUpdate, which is invalid syntax.

All other options correctly call the lifecycle hooks with arrow functions.

🔧 Debug

advanced

Why does afterUpdate cause an infinite loop here?

Examine this Svelte code snippet. Why does it cause an infinite update loop?

Svelte

  <script>
    import { afterUpdate } from 'svelte';
    let count = 0;

    afterUpdate(() => {
      count += 1;
    });
  </script>

  <p>{count}</p>

A Because <code>afterUpdate</code> is not imported correctly.

B Because <code>count</code> is not initialized.

C Because <code>count</code> is not displayed in the template.

D Because <code>afterUpdate</code> changes <code>count</code>, triggering itself repeatedly.

💡 Hint

Think about what triggers Svelte to run afterUpdate again.

Modifying count inside afterUpdate causes a state change.

This triggers another update cycle, which calls afterUpdate again, causing an infinite loop.

🧠 Conceptual

expert

Choosing the correct lifecycle hook for DOM measurement

You want to measure the size of a DOM element after it updates in Svelte. Which lifecycle hook should you use and why?

A <code>beforeUpdate</code>, because it runs before the DOM changes and lets you measure the old size.

B Neither, you should use <code>onMount</code> because it runs once after component loads.

C <code>afterUpdate</code>, because it runs after the DOM updates and lets you measure the new size.

D <code>beforeUpdate</code>, because it runs after the DOM updates and lets you measure the new size.

💡 Hint

Think about when the DOM reflects the latest changes.

afterUpdate runs after the DOM has updated, so you can measure the element's new size accurately.

beforeUpdate runs before the DOM changes, so it measures the old size.

onMount runs only once after initial render, not after updates.