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.