Svelte vs React vs Vue comparison - Quick Revision & Key Differences

Recall & Review

beginner

What is the main difference in how Svelte works compared to React and Vue?

Svelte compiles your code to efficient JavaScript at build time, so it updates the DOM directly without a virtual DOM. React and Vue use a virtual DOM to update the UI at runtime.

beginner

How does React manage component state compared to Svelte?

React uses hooks like useState to manage state inside components, while Svelte uses reactive assignments and special syntax ($:) to update state automatically.

beginner

What makes Vue's template syntax different from React's JSX?

Vue uses an HTML-based template syntax that feels like writing regular HTML with special directives, while React uses JSX which mixes JavaScript and HTML-like code inside components.

intermediate

Which framework is known for having the smallest bundle size and why?

Svelte usually produces the smallest bundle size because it compiles away the framework code at build time, leaving only the minimal JavaScript needed to run your app.

intermediate

How do React, Vue, and Svelte handle reactivity differently?

React re-renders components when state changes via hooks, Vue tracks dependencies reactively using proxies, and Svelte compiles reactive code that updates the DOM directly without extra runtime overhead.

Which framework compiles your code at build time to optimize performance?

A Angular

B React

C Vue

D Svelte

Svelte compiles your code at build time, unlike React and Vue which use runtime virtual DOM.

What syntax does React use to write UI components?

A JSX

B XML

C Svelte syntax

D HTML templates

React uses JSX, which mixes JavaScript and HTML-like syntax.

Which framework uses a virtual DOM to update the UI?

A Svelte

B None

C React

D All

React uses a virtual DOM. Vue also uses a virtual DOM, but the question asks for one correct answer.

Vue's template syntax is closest to which of these?

A HTML with special directives

B Plain JavaScript

C JSX

D CSS

Vue uses HTML templates with special directives like v-if and v-for.

Which framework typically results in the smallest JavaScript bundle size?

A React

B Svelte

C Vue

D Ember

Svelte compiles away framework code, leading to smaller bundles.

Explain how Svelte's approach to updating the UI differs from React and Vue.

Think about when and how the UI changes happen.

Compare the template or syntax styles used by React, Vue, and Svelte.

Focus on how you write the UI code in each.

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