Svelte vs React: A 2021 Perspective

React involves shipping a runtime (Virtual DOM) to the browser. Svelte is a compiler that generates vanilla JS. The difference is profound.

Reactivity Models

React (Pull)

React re-renders the component tree when state changes. You must use `useMemo` and `useCallback` to prevent unnecessary work.

Svelte (Push)

Svelte uses topological ordering during compilation. Assignments *are* the reactivity.

// Svelte
let count = 0;
$: doubled = count * 2; // Reactive statement
function handleClick() {
    count += 1; // No setState, no hooks!
}

The bundle size for a “Hello World” is 3KB (Svelte) vs 40KB (React). For performance-critical dashboards, we are moving to Svelte.