Svelte vs React : les mêmes composants écrits dans les deux | We.Inc
Comparez Svelte 5 et React avec le même compteur, la même liste, le même formulaire et le même effet écrits dans chacun. Voyez ce qui distingue les runes des hooks et lequel convient à votre prochain projet.
Svelte est un compilateur : il transforme les fichiers .svelte en JavaScript simple, et l'état déclaré avec la rune $state met la page à jour directement. React est une librairie dans laquelle une fonction composant s'exécute à nouveau à chaque changement d'état et renvoie du nouveau JSX. Svelte demande en général moins de code par composant ; React apporte un écosystème plus vaste et un vivier de recrutement plus large.
Svelte 5 et React en un coup d'œil
Sujet
Svelte 5
React
Mode de livraison
Un compilateur transforme les composants en JavaScript
Librairie chargée dans le navigateur
Le code du composant s'exécute
Une fois, à la création du composant
À nouveau à chaque re-rendu
État local
let count = $state(0)
const [count, setCount] = useState(0)
Valeur calculée
$derived(expression)
Simple expression dans le corps du rendu
Effets de bord
$effect, dépendances suivies pour vous
useEffect avec un tableau de dépendances
Props
let { name } = $props()
Paramètres de fonction
Liaison bidirectionnelle
bind:value, $bindable pour les props
value plus onChange
Gestionnaire de clic
onclick={...}
onClick={...}
Framework full-stack
SvelteKit
Next.js et d'autres
Choisissez un composant ci-dessous et lisez la version Svelte 5 à côté de la version React. Les deux font exactement la même chose : la seule différence que vous voyez tient au framework. Chaque extrait est complet et fonctionne tel quel dans un nouveau projet.
Choisissez l'un des quatre composants : compteur, liste, formulaire ou effet.
Lisez le fichier Svelte à gauche et le fichier React à droite.
Consultez la note pour voir quelle règle de chaque framework l'exemple illustre.
Copiez l'une ou l'autre version dans un nouveau projet pour l'essayer.
En Svelte, modifiez directement les tableaux et objets placés dans $state. En React, passez toujours un nouveau tableau ou un nouvel objet au setter.
Ne vous servez pas de $effect pour synchroniser deux valeurs. Une valeur $derived est la réponse Svelte, tout comme React conseille de la calculer pendant le rendu.
Si votre équipe connaît déjà React, l'argument du recrutement et des librairies l'emporte généralement sur des composants Svelte plus courts.
Essayez une petite page interne en Svelte avant de tout migrer. Faire cohabiter les deux dans une même app est possible, mais en vaut rarement la peine.
Questions fréquentes
Svelte est-il plus rapide que React ?
Nous ne citons pas de chiffres de vitesse ici, car les résultats dépendent de l'app et du test. La différence structurelle est réelle : Svelte supprime la couche du framework à la compilation et ne met à jour que ce qui a changé, tandis que React réexécute les composants et compare le résultat.
Svelte 5 utilise-t-il encore let pour l'état réactif ?
Pas à lui seul. Dans Svelte 4, un let de premier niveau était réactif par défaut. Svelte 5 rend cela explicite : une variable devient réactive quand vous la créez avec $state.
Quel est l'équivalent Svelte de Next.js ?
SvelteKit. La documentation de Svelte le présente comme le framework applicatif compagnon : il ajoute le routage, le rendu serveur et le chargement de données par-dessus les composants Svelte.
Puis-je utiliser des librairies React dans Svelte ?
Pas directement. Les composants React ont besoin de React pour s'afficher. Les librairies JavaScript sans couche d'interface, comme les utilitaires de dates ou de validation, fonctionnent dans les deux.
Lequel un débutant doit-il apprendre en premier ?
Les templates Svelte sont plus proches du HTML classique, donc les premiers pas sont plus doux. React compte bien plus de tutoriels et d'offres d'emploi. Si l'objectif est de trouver un emploi, commencez par React.
Runes contre hooks
Svelte 5 a remplacé son ancienne réactivité implicite par les runes : $state, $derived, $effect, $props et $bindable. Elles ressemblent à des appels de fonction mais sont des mots-clés du compilateur, qui peut ainsi relier chaque valeur aux parties de la page qui la lisent.
Les hooks React sont des fonctions ordinaires qui doivent être appelées au premier niveau d'un composant, dans le même ordre à chaque rendu. useState vous donne un instantané de la valeur et un setter, et la nouvelle valeur n'apparaît qu'au rendu suivant.
Effets et dépendances
Un $effect Svelte suit tout l'état qu'il lit de façon synchrone et se réexécute quand cet état change. Les valeurs lues après un await ne sont pas suivies. React vous demande de lister chaque valeur réactive dans le tableau de dépendances de useEffect, et son linter vous avertit quand il en manque une.
Les deux ne s'exécutent que dans le navigateur, jamais pendant le rendu serveur, et acceptent tous deux une fonction de nettoyage renvoyée, exécutée avant le passage suivant et au démontage.
Quand choisir l'un ou l'autre
Choisissez Svelte pour les sites de contenu, les widgets et les petites équipes qui veulent moins de code et se contentent d'un catalogue de librairies plus restreint. Choisissez React quand vous avez besoin d'une librairie React précise, d'une grande équipe, ou d'un framework comme Next.js autour duquel votre hébergement est conçu.
Démarrer un projet avec chacun
Commandes d'initialisation
La première commande crée une app SvelteKit avec l'outil officiel sv ; la seconde crée une app Next.js, le framework React le mieux documenté.
Compteur
Svelte vous laisse écrire count++ car $state rend la variable réactive. React a besoin du setter, et la nouvelle valeur apparaît au rendu suivant.
Liste
Les tableaux dans $state sont des proxys réactifs en profondeur, donc push met la page à jour. React traite l'état en lecture seule : copiez le tableau et passez la copie au setter.
Formulaire
bind:value garde le champ et la variable synchronisés dans les deux sens. React utilise un champ contrôlé : value vient de l'état et onChange le réécrit.
Effet
Svelte détecte que l'effet lit count. React a besoin de count dans le tableau de dépendances, sinon le titre cesserait de se mettre à jour.