Svelte is a compiler: it turns .svelte files into plain JavaScript, and state declared with the $state rune updates the page directly. React is a library where a component function runs again on every state change and returns new JSX. Svelte usually means less code per component; React brings the larger ecosystem and hiring pool.
| Topic | Svelte 5 | React |
|---|---|---|
| How it ships | Compiler turns components into JavaScript | Library loaded in the browser |
| Component code runs | Once, when the component is created | Again on each re-render |
| Local state | let count = $state(0) | const [count, setCount] = useState(0) |
| Computed value | $derived(expression) | Plain expression in the render body |
| Side effects | $effect, dependencies tracked for you | useEffect with a dependency array |
| Props | let { name } = $props() | Function parameters |
| Two-way binding | bind:value, $bindable for props | value plus onChange |
| Click handler | onclick={...} | onClick={...} |
| Full-stack framework | SvelteKit | Next.js and others |
Updated
Pick a component below and read the Svelte 5 version next to the React version. Both do exactly the same thing, so the difference you see is only the framework. Every snippet is complete and runs as written in a fresh project.
<script>
let count = $state(0);
</script>
<button onclick={() => count++}>
Clicked {count} times
</button>import { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
);
}Svelte lets you write count++ because $state makes the variable reactive. React needs the setter, and the new value shows up on the next render.
The first command starts a SvelteKit app with the official sv tool; the second starts a Next.js app, the React framework with the most documentation.
# Svelte (SvelteKit)
npx sv create my-svelte-app
# React (Next.js)
npx create-next-app@latest my-react-appSvelte 5 replaced its older implicit reactivity with runes: $state, $derived, $effect, $props and $bindable. They look like function calls but are compiler keywords, so the compiler can wire each value to the parts of the page that read it.
React hooks are ordinary functions that must be called at the top level of a component, in the same order every render. useState gives you a snapshot of the value and a setter, and the new value only appears on the next render.
A Svelte $effect tracks whatever state it reads synchronously and re-runs when that state changes. Values read after an await are not tracked. React asks you to list every reactive value in the dependency array of useEffect, and its linter warns when one is missing.
Both run only in the browser, never during server rendering, and both accept a returned cleanup function that runs before the next run and on unmount.
Pick Svelte for content sites, widgets and small teams who want less code and are happy with a smaller library catalogue. Pick React when you need a specific React library, a large team, or a framework such as Next.js that your hosting is built around.
We do not quote speed numbers here because results depend on the app and the test. The structural difference is real: Svelte compiles away the framework layer and updates only what changed, while React re-runs components and compares the result.
Not on its own. In Svelte 4 a top-level let was reactive by default. Svelte 5 makes it explicit: a variable becomes reactive when you create it with $state.
SvelteKit. The Svelte docs call it the companion application framework, and it adds routing, server rendering and data loading on top of Svelte components.
Not directly. React components need React to render. Plain JavaScript libraries without a UI layer, such as date or validation helpers, work in both.
Svelte templates are closer to plain HTML, so the first steps are gentler. React has far more tutorials and job listings. If employment is the goal, start with React.
Related: Svelte 5 runes explained, React hooks cheat sheet, Next.js vs React, Astro vs Next.js, React with TypeScript.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.