Svelte vs React vs Vue comparison - Practice Questions

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Svelte update the DOM compared to React and Vue?

Consider how Svelte, React, and Vue update the webpage when data changes. Which statement best describes Svelte's approach?

A Svelte compiles components to efficient JavaScript that updates the DOM directly without a virtual DOM.

B Svelte uses a virtual DOM to batch updates and then applies them to the real DOM like React.

C Svelte relies on a reactive system that tracks dependencies but still uses a virtual DOM like Vue.

D Svelte updates the entire DOM tree on every change without optimization.

💡 Hint

Think about whether Svelte uses a virtual DOM or compiles away the framework.

Svelte compiles your code into small, efficient JavaScript that updates the DOM directly. Unlike React and Vue, it does not use a virtual DOM, which makes updates faster and smaller.

❓ state_output

intermediate

What is the output of this Svelte reactive statement compared to React's useState?

Given this Svelte code snippet, what will be the value of count after clicking the button twice?

  <script>
    let count = 0;
    function increment() {
      count += 1;
    }
  </script>
  <button on:click={increment}>Clicked {count} times</button>

A count will be 1 because Svelte batches updates and skips the second increment.

B count will be 2, but the button text updates only after a delay.

C count will remain 0 because Svelte requires special hooks to update state.

D count will be 2, and the button text updates immediately after each click.

💡 Hint

Remember how Svelte tracks reactive variables and updates the UI immediately.

Svelte tracks changes to variables like count automatically. When you click the button, count increases and the UI updates right away without needing extra hooks.

📝 Syntax

advanced

Which Svelte syntax correctly binds a component prop and listens to an event?

Choose the correct Svelte syntax to pass a title prop to a child component and listen for a save event.

A <Child [title]=pageTitle (save)=handleSave />

B <Child :title="pageTitle" @save="handleSave" />

C <Child title={pageTitle} on:save={handleSave} />

D <Child bind:title={pageTitle} listen:save={handleSave} />

💡 Hint

Recall how Svelte uses curly braces for props and on:event for events.

Svelte uses curly braces to pass props and the on:event directive to listen to events. Option C follows this pattern correctly.

🔧 Debug

advanced

Why does this Svelte component fail to update the UI when the array changes?

Look at this Svelte code snippet:

<script>
  let items = [1, 2, 3];
  function addItem() {
    items.push(items.length + 1);
  }
</script>
<button on:click={addItem}>Add Item</button>
<ul>
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>

Clicking the button does not update the list. Why?

A Because the <code>each</code> block requires a key to update properly.

B Because Svelte does not detect changes when mutating arrays directly; you must assign a new array to trigger updates.

C Because the <code>push</code> method is asynchronous and delays updates.

D Because the <code>addItem</code> function is missing an <code>await</code> keyword.

💡 Hint

Think about how Svelte tracks changes to variables and arrays.

Svelte tracks assignments to variables. Mutating an array with push does not trigger reactivity. You must assign a new array, for example: items = [...items, newItem].

🧠 Conceptual

expert

Which framework's design leads to smaller bundle sizes and faster startup times?

Between Svelte, React, and Vue, which framework's design inherently produces smaller JavaScript bundles and faster page load times, and why?

A Svelte, because it compiles components at build time into minimal JavaScript without a runtime virtual DOM.

B React, because its virtual DOM diffing reduces the amount of JavaScript needed at runtime.

C Vue, because it uses a template compiler that eliminates the need for JavaScript in the browser.

D All three produce similar bundle sizes because they all use virtual DOMs.

💡 Hint

Consider which framework does most work before the browser runs the code.

Svelte compiles your code ahead of time into efficient JavaScript that updates the DOM directly. This removes the need for a large runtime library and virtual DOM, resulting in smaller bundles and faster startup.

Practice

1. Which framework compiles your code to efficient JavaScript at build time, reducing runtime overhead?

easy

A. Svelte

B. React

C. Vue

D. Angular

Solution

1. Step 1: Understand Svelte's compilation approach

   Svelte compiles components to optimized JavaScript during build, so no virtual DOM at runtime.

2. Step 2: Compare with React and Vue runtime behavior

   React and Vue use virtual DOM diffing at runtime, adding overhead compared to Svelte.

3. Final Answer:

   Svelte -> Option A

4. Quick Check:

   Compile-time optimization = Svelte [OK]

Hint: Svelte compiles away framework code before running [OK]

Common Mistakes:

• Thinking React compiles away virtual DOM
• Confusing Vue's runtime with compile-time
• Assuming Angular behaves like Svelte

2. Which syntax is correct for creating a reactive variable in Svelte?

easy

A. var count = 0; function doubled() { return count * 2; }

B. const [count, setCount] = useState(0);

C. data() { return { count: 0 } }

D. let count = 0; $: doubled = count * 2;

Solution

1. Step 1: Identify Svelte reactive syntax

   Svelte uses $: label to declare reactive statements that update when dependencies change.

2. Step 2: Check other options for framework syntax

   const [count, setCount] = useState(0); is React useState, C is Vue data option, D is plain JS function.

3. Final Answer:

   let count = 0; $: doubled = count * 2; -> Option D

4. Quick Check:

   Svelte reactive label = $: [OK]

Hint: Svelte uses $: for reactive declarations [OK]

Common Mistakes:

• Using React or Vue syntax in Svelte
• Forgetting the $: label for reactivity
• Using var instead of let/const in Svelte

3. Given this Svelte code snippet, what will be displayed when count is 3?

 <script>
  let count = 3;
  $: doubled = count * 2;
</script>
<p>Doubled: {doubled}</p>

medium

A. Doubled: 3

B. Doubled: 9

C. Doubled: 6

D. Doubled: undefined

Solution

1. Step 1: Calculate doubled value

   With count = 3, doubled = 3 * 2 = 6.

2. Step 2: Understand Svelte reactive update

   The reactive statement updates doubled automatically, so the displayed value is 6.

3. Final Answer:

   Doubled: 6 -> Option C

4. Quick Check:

   count * 2 = 6 [OK]

Hint: Multiply count by 2 for doubled value [OK]

Common Mistakes:

• Confusing doubled with count
• Assuming doubled is undefined without initialization
• Multiplying incorrectly

4. Identify the error in this React code compared to Svelte's approach:

function Counter() {
  let count = 0;
  function increment() {
    count++;
  }
  return <button onClick={increment}>{count}</button>;
}

medium

A. count should be declared with const in React

B. React state must use useState hook, not a plain variable

C. Svelte requires on:click instead of onClick

D. React buttons cannot display variables

Solution

1. Step 1: Check React state management

   React requires useState hook to track state changes and trigger re-render.

2. Step 2: Identify why plain variable fails

   Using let count = 0 won't update UI on increment because React doesn't track it.

3. Final Answer:

   React state must use useState hook, not a plain variable -> Option B

4. Quick Check:

   React state needs useState [OK]

Hint: React state needs useState hook, not plain variables [OK]

Common Mistakes:

• Thinking onClick is invalid in React
• Using const for mutable state
• Believing React buttons can't show variables

5. You want to build a small interactive widget with minimal setup and fast load time. Which framework is best suited and why?

hard

A. Svelte, because it compiles to minimal JavaScript and runs fast

B. Vue, because it is easy to learn and has good tooling

C. React, because of its large ecosystem and flexibility

D. Angular, because it provides a full-featured framework

Solution

1. Step 1: Analyze requirements for minimal setup and fast load

   Minimal setup and fast load favor frameworks that produce small, efficient code.

2. Step 2: Compare frameworks on output size and runtime speed

   Svelte compiles away framework code, resulting in smaller bundles and faster startup than React or Vue.

3. Step 3: Consider ecosystem and complexity

   React and Vue have bigger ecosystems but more runtime overhead; Angular is heavier and more complex.

4. Final Answer:

   Svelte, because it compiles to minimal JavaScript and runs fast -> Option A

5. Quick Check:

   Minimal setup + speed = Svelte [OK]

Hint: Small, fast widget? Choose Svelte for minimal code [OK]

Common Mistakes:

• Picking React for minimal setup despite larger runtime
• Choosing Angular for small widgets
• Ignoring compile-time benefits of Svelte