Svelte vs React: gli stessi componenti scritti in entrambi | We.Inc
Confronta Svelte 5 e React con lo stesso counter, lista, form ed effect scritti in entrambi. Scopri come le rune differiscono dagli hook e quale si adatta al tuo prossimo progetto.
Svelte è un compilatore: trasforma i file .svelte in JavaScript semplice, e lo state dichiarato con la runa $state aggiorna direttamente la pagina. React è una libreria in cui la funzione di un componente viene rieseguita a ogni cambio di state e restituisce nuovo JSX. Svelte di solito significa meno codice per componente; React porta un ecosistema più ampio e un bacino di sviluppatori più grande.
Svelte 5 e React in sintesi
Tema
Svelte 5
React
Come viene distribuito
Il compilatore trasforma i componenti in JavaScript
Libreria caricata nel browser
Il codice del componente gira
Una volta, quando il componente viene creato
Di nuovo a ogni re-render
State locale
let count = $state(0)
const [count, setCount] = useState(0)
Valore calcolato
$derived(expression)
Espressione semplice nel corpo del render
Side effect
$effect, dipendenze tracciate per te
useEffect con un array di dipendenze
Props
let { name } = $props()
Parametri della funzione
Binding bidirezionale
bind:value, $bindable per le props
value più onChange
Gestore del clic
onclick={...}
onClick={...}
Framework full-stack
SvelteKit
Next.js e altri
Scegli un componente qui sotto e leggi la versione Svelte 5 accanto a quella React. Entrambe fanno esattamente la stessa cosa, quindi la differenza che vedi dipende solo dal framework. Ogni snippet è completo e funziona così com'è in un progetto nuovo.
Scegli uno dei quattro componenti: counter, lista, form o effect.
Leggi il file Svelte a sinistra e il file React a destra.
Controlla la nota per vedere quale regola di ciascun framework mostra l'esempio.
Copia una delle due versioni in un nuovo progetto per provarla.
In Svelte, modifica direttamente array e oggetti contenuti in $state. In React, passa sempre un nuovo array o oggetto al setter.
Non usare $effect per tenere sincronizzati due valori. Un valore $derived è la risposta di Svelte, proprio come React suggerisce di calcolarlo durante il render.
Se il tuo team conosce già React, l'argomento delle assunzioni e delle librerie di solito pesa più dei componenti Svelte più compatti.
Prova una piccola pagina interna in Svelte prima di un passaggio completo. L'interoperabilità tra i due nella stessa app è possibile ma raramente ne vale la pena.
Domande frequenti
Svelte è più veloce di React?
Qui non citiamo numeri sulla velocità perché i risultati dipendono dall'app e dal test. La differenza strutturale è reale: Svelte elimina in compilazione lo strato del framework e aggiorna solo ciò che è cambiato, mentre React riesegue i componenti e confronta il risultato.
Svelte 5 usa ancora let per lo state reattivo?
Non da solo. In Svelte 4 un let al livello principale era reattivo di default. Svelte 5 lo rende esplicito: una variabile diventa reattiva quando la crei con $state.
Qual è l'equivalente Svelte di Next.js?
SvelteKit. La documentazione di Svelte lo definisce il framework applicativo di accompagnamento, e aggiunge routing, rendering lato server e caricamento dei dati sopra i componenti Svelte.
Posso usare librerie React in Svelte?
Non direttamente. I componenti React hanno bisogno di React per essere renderizzati. Le librerie JavaScript semplici senza uno strato di UI, come gli helper per date o validazione, funzionano in entrambi.
Quale dovrebbe imparare prima un principiante?
I template di Svelte sono più vicini all'HTML semplice, quindi i primi passi sono più dolci. React ha molti più tutorial e annunci di lavoro. Se l'obiettivo è trovare lavoro, inizia con React.
Rune contro hook
Svelte 5 ha sostituito la vecchia reattività implicita con le rune: $state, $derived, $effect, $props e $bindable. Sembrano chiamate di funzione ma sono parole chiave del compilatore, così il compilatore può collegare ogni valore alle parti della pagina che lo leggono.
Gli hook di React sono normali funzioni che vanno chiamate al livello principale di un componente, nello stesso ordine a ogni render. useState ti dà un'istantanea del valore e un setter, e il nuovo valore compare solo al render successivo.
Effect e dipendenze
Un $effect di Svelte traccia qualunque state legga in modo sincrono e si riesegue quando quello state cambia. I valori letti dopo un await non vengono tracciati. React ti chiede di elencare ogni valore reattivo nell'array di dipendenze di useEffect, e il suo linter avvisa quando ne manca uno.
Entrambi girano solo nel browser, mai durante il rendering lato server, ed entrambi accettano una funzione di cleanup restituita che viene eseguita prima dell'esecuzione successiva e allo smontaggio.
Quando è adatto l'uno o l'altro
Scegli Svelte per siti di contenuti, widget e piccoli team che vogliono meno codice e si accontentano di un catalogo di librerie più piccolo. Scegli React quando ti serve una specifica libreria React, un team grande o un framework come Next.js attorno a cui è costruito il tuo hosting.
Avvia un progetto con ciascuno
Comandi di scaffolding
Il primo comando avvia un'app SvelteKit con lo strumento ufficiale sv; il secondo avvia un'app Next.js, il framework React con più documentazione.
Counter
Svelte ti permette di scrivere count++ perché $state rende reattiva la variabile. React ha bisogno del setter, e il nuovo valore compare al render successivo.
Lista
Gli array in $state sono proxy profondamente reattivi, quindi push aggiorna la pagina. React tratta lo state come di sola lettura: copia l'array e passa la copia al setter.
Form
bind:value mantiene sincronizzati input e variabile in entrambe le direzioni. React usa un input controllato: value arriva dallo state e onChange lo riscrive.
Effect
Svelte capisce da solo che l'effect legge count. React ha bisogno di count nell'array di dipendenze, altrimenti il titolo smetterebbe di aggiornarsi.