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.