Why Svelte exists - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why does Svelte compile components at build time?

Svelte compiles components into efficient JavaScript during build time instead of using a virtual DOM at runtime. What is the main benefit of this approach?

A It reduces the amount of code the browser needs to run, improving performance.

B It enables Svelte to automatically generate CSS stylesheets.

C It makes the development server start faster by skipping compilation.

D It allows Svelte to support older browsers without polyfills.

💡 Hint

Think about what happens when less work is done in the browser.

Svelte shifts work from the browser to build time, so the browser runs less code. This leads to faster apps and smaller bundles.

❓ component_behavior

intermediate

How does Svelte update the UI when state changes?

In Svelte, when you update a variable declared with let inside a component, how does the UI update?

Svelte

let count = 0;

function increment() {
  count += 1;
}

A Svelte uses a virtual DOM to detect changes and update the UI.

B You must call a special update function to refresh the UI after changing variables.

C The UI updates only when the component is re-mounted.

D Svelte tracks assignments and updates the DOM automatically when variables change.

💡 Hint

Think about how Svelte knows when a variable changes.

Svelte compiles code so that assignments to let variables trigger DOM updates automatically without extra calls.

❓ lifecycle

advanced

What lifecycle behavior is unique to Svelte compared to React or Vue?

Which lifecycle feature is specific to Svelte's approach and not found in React or Vue?

A A <code>watch</code> option to observe data changes.

B A <code>useEffect</code> hook that runs after every render.

C A <code>beforeUpdate</code> callback that runs before the DOM updates.

D A <code>componentDidMount</code> method called after mounting.

💡 Hint

Svelte has lifecycle callbacks named differently than React or Vue.

Svelte provides beforeUpdate which runs just before the DOM updates, a feature not present in React or Vue lifecycles.

📝 Syntax

advanced

What is the correct way to declare a reactive statement in Svelte?

Which option shows the correct syntax for a reactive statement that updates double when count changes?

Svelte

let count = 1;
let double;

A $: double = count * 2;

B reactive double = count * 2;

C let $double = count * 2;

D double := count * 2;

💡 Hint

Look for the special symbol Svelte uses for reactive statements.

Svelte uses $: to mark reactive statements that run whenever dependencies change.

🔧 Debug

expert

Why does this Svelte component not update the UI when count changes?

Consider this code snippet:

let count = 0;

function increment() {
  count++;
}

The UI shows {count} but does not update when increment is called. Why?

A Because Svelte requires using <code>setCount()</code> to update variables.

B Because <code>count++</code> does not trigger reactivity; you must assign <code>count = count + 1</code>.

C Because the <code>increment</code> function is not called inside a Svelte event handler.

D Because <code>count</code> must be declared with <code>$let</code> to be reactive.

💡 Hint

Think about how Svelte detects changes to variables.

Svelte tracks assignments to variables. Using count++ increments but does not assign, so reactivity is not triggered.