Layout load functions in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this layout load function return?

Consider this SvelteKit layout load function. What will be the value of data available to the layout component?

Svelte

export async function load() {
  return {
    user: { name: 'Alice', role: 'admin' },
    settings: { theme: 'dark' }
  };
}

A { user: { name: 'Alice' }, settings: { theme: 'dark' } }

B { user: { role: 'admin' }, settings: { theme: 'light' } }

C { user: { name: 'Alice', role: 'admin' }, settings: { theme: 'dark' } }

D undefined

💡 Hint

The load function returns an object that becomes the data prop in the layout.

The load function returns an object with user and settings keys. This object is passed as data to the layout component.

❓ state_output

intermediate

How many keys are in the data object from this layout load?

Given this layout load function, how many top-level keys will data have in the layout component?

Svelte

export function load() {
  return {
    user: { id: 1 },
    notifications: [],
    preferences: { lang: 'en' }
  };
}

A 3

B 2

C 1

D 0

💡 Hint

Count the keys returned in the object.

The returned object has three keys: user, notifications, and preferences.

📝 Syntax

advanced

Which option causes a syntax error in a layout load function?

Identify the option that will cause a syntax error when used as a layout load function in SvelteKit.

A } ;} 'boB' :resu { nruter { )(daol noitcnuf cnysa tropxe

B export function load() { return { user: 'Bob' } }

C export async function load() { return { user: 'Bob' }; }

D export function load() { return user: 'Bob' }

💡 Hint

Check the syntax of the return statement object.

Option D is missing curly braces around the returned object, causing a syntax error.

🔧 Debug

advanced

Why does this layout load function cause a runtime error?

Examine this layout load function. Why will it cause a runtime error when the layout tries to access data.user.name?

Svelte

export function load() {
  return {
    user: null
  };
}

A Because the load function must be async.

B Because <code>user</code> is null, accessing <code>name</code> causes a TypeError.

C Because the return object is missing a <code>name</code> key.

D Because the load function does not return a Promise.

💡 Hint

Think about what happens if you try to access a property on null.

Accessing data.user.name when user is null causes a TypeError because null has no properties.

🧠 Conceptual

expert

What happens if a layout load function returns a Promise that rejects?

In SvelteKit, if a layout load function returns a Promise that rejects with an error, what is the expected behavior?

A The error is caught by SvelteKit and the error page is shown.

B The app crashes and stops loading any pages.

C The layout silently ignores the error and renders with empty data.

D The load function retries automatically until it succeeds.

💡 Hint

Think about how frameworks handle rejected Promises in load functions.

SvelteKit catches errors from rejected Promises in load functions and shows the error page to inform the user.

Practice

1. What is the main purpose of a load function in a Svelte layout?

easy

A. To style the layout component with CSS

B. To fetch or prepare data before the layout renders

C. To handle user events like clicks

D. To define routes for the application

Solution

1. Step 1: Understand the role of load functions in Svelte layouts

   Load functions run before the layout renders to get data ready.

2. Step 2: Identify what load functions do

   They fetch or prepare data so the layout can use it immediately.

3. Final Answer:

   To fetch or prepare data before the layout renders -> Option B

4. Quick Check:

   Layout load = fetch data before render [OK]

Hint: Load functions prepare data before layout shows [OK]

Common Mistakes:

• Confusing load with styling or event handling
• Thinking load defines routes
• Assuming load runs after layout renders

2. Which of the following is the correct syntax for a layout load function in SvelteKit?

easy

A. export async function load() { return { user: 'Alice' }; }

B. export async function load() { return { props: { user: 'Alice' } }; }

C. export function load() { return { props: { user: 'Alice' } }; }

D. function load() { return { user: 'Alice' }; }

Solution

1. Step 1: Recall the modern SvelteKit load function syntax

   Load functions are async and return data directly, not inside a props object.

2. Step 2: Check each option's return value

   export async function load() { return { user: 'Alice' }; } returns { user: 'Alice' } directly, which is correct for layout load.

3. Final Answer:

   export async function load() { return { user: 'Alice' }; } -> Option A

4. Quick Check:

   Load returns data directly, no props wrapper [OK]

Hint: Load returns data directly, no props wrapper [OK]

Common Mistakes:

• Returning data inside a props object (old pattern)
• Missing async keyword
• Not exporting the load function

3. Given this layout load function:

export async function load() {
  return { user: 'Bob', theme: 'dark' };
}

What data will be available in the layout component's data prop?

medium

A. { user: 'Bob', theme: 'dark' }

B. { props: { user: 'Bob', theme: 'dark' } }

C. undefined

D. { user: 'Bob' }

Solution

1. Step 1: Understand what the load function returns

   The load function returns an object with keys user and theme.

2. Step 2: Know how layout receives load data

   The layout component receives the returned object as its data prop directly.

3. Final Answer:

   { user: 'Bob', theme: 'dark' } -> Option A

4. Quick Check:

   Load return = layout data prop [OK]

Hint: Layout data matches load return object exactly [OK]

Common Mistakes:

• Expecting data inside a props object
• Assuming data is undefined without explicit props
• Only partial data returned

4. Identify the error in this layout load function:

export function load() {
  const user = fetch('/api/user');
  return { user };
}

medium

A. load function should not return any value

B. Returning user inside an object is incorrect

C. fetch should not be used in load functions

D. Missing async keyword and await for fetch

Solution

1. Step 1: Check if fetch is awaited

   fetch returns a promise, so it must be awaited inside an async function.

2. Step 2: Verify load function declaration

   load must be async to use await; here it is missing async.

3. Final Answer:

   Missing async keyword and await for fetch -> Option D

4. Quick Check:

   Async + await needed for fetch in load [OK]

Hint: Always use async and await with fetch in load [OK]

Common Mistakes:

• Forgetting async keyword
• Not awaiting fetch promise
• Returning unresolved promise instead of data

5. You want to share user info fetched in a layout load function with all nested pages. Which approach correctly achieves this in SvelteKit?

hard

A. Store user data in a global variable outside load functions

B. Fetch user data separately in each page's load function

C. Use a layout load function that fetches user data and returns it; nested pages access via data

D. Pass user data as props manually from layout to pages

Solution

1. Step 1: Understand data flow in SvelteKit layouts

   Layout load functions run once and share data with nested pages via the data prop.

2. Step 2: Identify best practice for shared data

   Fetching user data in layout load and returning it allows nested pages to access it automatically.

3. Final Answer:

   Use a layout load function that fetches user data and returns it; nested pages access via data -> Option C

4. Quick Check:

   Layout load shares data with nested pages [OK]

Hint: Fetch once in layout load to share data with pages [OK]

Common Mistakes:

• Fetching data repeatedly in each page
• Using global variables causing stale data
• Manually passing props instead of using data prop