Middleware patterns with hooks in Svelte - Step-by-Step Execution

Concept Flow - Middleware patterns with hooks

Request Received

↓

Run Hook 1 Middleware

↓

Run Hook 2 Middleware

↓

Run Final Handler

↓

Send Response

Middleware hooks run in order on a request, each can modify or stop the flow before final handling.

Execution Sample

Svelte

import { beforeNavigate } from '$app/navigation';
beforeNavigate(() => {
  console.log('Middleware hook runs');
});

This code runs a middleware hook before navigation happens in a Svelte app.

Execution Table

Step	Hook Called	Action Taken	Next Step
1	beforeNavigate Hook	Logs 'Middleware hook runs'	Continue to next middleware or handler
2	No more hooks	Final handler runs	Send response
3	End	Response sent	Execution stops

💡 All middleware hooks completed, final handler executed, response sent

Variable Tracker

Variable	Start	After Hook 1	After Final Handler	Final
navigationAllowed	true	true	true	true
logMessages	[]	['Middleware hook runs']	['Middleware hook runs']	['Middleware hook runs']

Key Moments - 2 Insights

Why does the middleware hook run before the final handler?

Middleware hooks like beforeNavigate run first to allow interception or modification before the final handler runs, as shown in execution_table step 1.

Can middleware stop navigation or response?

Yes, middleware can stop or redirect navigation by not calling next or by modifying state, but in this example it just logs and continues (execution_table step 1).

Visual Quiz - 3 Questions

Look at the execution table, what happens at step 1?

A Execution stops immediately

B Middleware hook logs a message and continues

C Final handler sends response

D No action taken

💡 Hint

Check the 'Action Taken' column for step 1 in execution_table

At which step is the response sent?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Next Step' and 'Action Taken' columns in execution_table

If the middleware stopped navigation, how would 'navigationAllowed' change in variable_tracker?

A It would become false after Hook 1

B It would stay true

C It would become false at start

D It would become true after final handler

💡 Hint

Check how 'navigationAllowed' changes after Hook 1 in variable_tracker

Concept Snapshot

Middleware hooks run in order before final handlers.
Each hook can modify or stop the flow.
In Svelte, hooks like beforeNavigate intercept navigation.
Hooks run first, then final handler executes.
Use hooks to add logging, checks, or redirects.

Full Transcript

Middleware patterns with hooks in Svelte let you run code before main actions like navigation. Hooks run in order, each can log, modify, or stop the flow. For example, beforeNavigate runs before navigation happens. The execution table shows step 1 runs the hook logging a message, then step 2 runs the final handler, and step 3 sends the response. Variables like navigationAllowed track if navigation continues. Beginners often wonder why hooks run first and if they can stop navigation. Yes, hooks run first to allow control, and they can stop or redirect navigation. The visual quiz checks understanding of these steps and variable changes. Remember, middleware hooks help manage app flow cleanly and flexibly.

Practice

1. Which Svelte hook is best suited to run code right after a component appears on the page?

easy

A. onDestroy

B. onMount

C. afterUpdate

D. beforeUpdate

Solution

1. Step 1: Understand when onMount runs

   onMount runs once right after the component is added to the page.

2. Step 2: Compare with other hooks

   beforeUpdate and afterUpdate run on updates, onDestroy runs when component is removed.

3. Final Answer:

   onMount -> Option B

4. Quick Check:

   Run code after component appears = onMount [OK]

Hint: Use onMount for code after component loads [OK]

Common Mistakes:

• Confusing onMount with beforeUpdate
• Using onDestroy to run code on load
• Thinking afterUpdate runs only once

2. Which is the correct syntax to import and use the onDestroy hook in a Svelte component?

easy

A. import { onDestroy } from 'svelte/hooks'; onDestroy(() => { /* cleanup */ });

B. import onDestroy from 'svelte'; onDestroy(() => { /* cleanup */ });

C. import { onDestroy } from 'svelte'; onDestroy = () => { /* cleanup */ };

D. import { onDestroy } from 'svelte'; onDestroy(() => { /* cleanup */ });

Solution

1. Step 1: Check correct import syntax

   Svelte exports hooks like onDestroy as named exports from 'svelte'.

2. Step 2: Verify usage

   The hook is called as a function with a callback: onDestroy(() => { ... }).

3. Final Answer:

   import { onDestroy } from 'svelte'; onDestroy(() => { /* cleanup */ }); -> Option D

4. Quick Check:

   Named import + callback function = import { onDestroy } from 'svelte'; onDestroy(() => { /* cleanup */ }); [OK]

Hint: Use named import from 'svelte' and call with callback [OK]

Common Mistakes:

• Using default import instead of named import
• Importing from wrong path like 'svelte/hooks'
• Assigning hook to a variable instead of calling it

3. Given this Svelte code snippet, what will be logged to the console when the component updates?

import { beforeUpdate, afterUpdate } from 'svelte';

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

let count = 0;

function increment() {
  count += 1;
}

medium

A. After update only once after first render

B. Only Before update once when component mounts

C. Before update\nAfter update each time increment() is called

D. No logs because hooks are not called

Solution

1. Step 1: Understand when hooks run

   beforeUpdate runs before every DOM update, afterUpdate runs after every DOM update.

2. Step 2: Analyze increment effect

   Calling increment() changes count, triggering component update and both hooks logging messages.

3. Final Answer:

   Before update\nAfter update each time increment() is called -> Option C

4. Quick Check:

   Hooks run on every update = Before update\nAfter update each time increment() is called [OK]

Hint: Hooks run before and after every update triggered by state change [OK]

Common Mistakes:

• Thinking hooks run only once on mount
• Assuming logs happen without calling increment()
• Confusing beforeUpdate and afterUpdate timing

4. What is wrong with this Svelte code using onDestroy?

import { onDestroy } from 'svelte';

onDestroy = () => {
  console.log('Cleanup');
};

medium

A. Assigning a function to onDestroy instead of calling it

B. Missing import statement for onDestroy

C. Using arrow function instead of regular function

D. onDestroy should be used inside onMount

Solution

1. Step 1: Check how onDestroy is used

   The code assigns a function to onDestroy instead of calling it with a callback.

2. Step 2: Correct usage

   onDestroy must be called like onDestroy(() => { ... }) to register cleanup.

3. Final Answer:

   Assigning a function to onDestroy instead of calling it -> Option A

4. Quick Check:

   Use onDestroy(callback), not assignment [OK]

Hint: Call onDestroy with a callback, don't assign it [OK]

Common Mistakes:

• Assigning instead of calling the hook
• Thinking arrow functions are disallowed
• Believing onDestroy must be inside onMount

5. You want to log a message every time a Svelte component updates but only after the DOM has changed. Which hook should you use and why? Also, how would you ensure cleanup if needed?

hard

A. Use afterUpdate to log after DOM changes; use onDestroy for cleanup

B. Use beforeUpdate to log after DOM changes; no cleanup needed

C. Use onMount to log after DOM changes; cleanup inside afterUpdate

D. Use onDestroy to log after DOM changes; cleanup inside beforeUpdate

Solution

1. Step 1: Identify hook for after DOM update

   afterUpdate runs after the DOM updates, perfect for logging post-change.

2. Step 2: Determine cleanup hook

   onDestroy runs when component is removed, ideal for cleanup tasks.

3. Final Answer:

   Use afterUpdate to log after DOM changes; use onDestroy for cleanup -> Option A

4. Quick Check:

   Log after DOM update = afterUpdate; cleanup = onDestroy [OK]

Hint: Log in afterUpdate; cleanup in onDestroy [OK]

Common Mistakes:

• Using beforeUpdate to log after DOM changes
• Trying to cleanup inside afterUpdate
• Confusing onMount with update hooks