DEV Community

Cover image for Svelte vs React: Which framework to learn in 2023?
Mikhail Karan
Mikhail Karan

Posted on • Updated on • Originally published at scrimba.com

 

Svelte vs React: Which framework to learn in 2023?

In the web development world, sometimes it can feel like a new frontend framework comes out every day! Most come and go, but one thing is for sure: Svelte is here to stay.

That does not necessarily mean you should drop everything and learn it today, though! Always chasing the latest trend can leave you distracted and overwhelmed.

This post will answer should I learn React or Svelte? once and for all.

You'll see some code examples that explain why React developers go bananas for Svelte, but we also have to be realistic.

React has been around a lot longer. There are more libraries, support, and jobs available.

Can Svelte still replace React? Let's find out!

  • πŸ“ What is React?
  • πŸ“ What is Svelte?
  • πŸ“ 5 differences between React and Svelte
    • Svelte has smaller bundle sizes
    • Svelte is easier to learn
    • Svelte compiles with pure HTML, CSS, and JavaScript
    • React has way more libraries
    • React has React Native
  • πŸ“ Is React a library or a framework?
  • πŸ“ Comparing a React and Svelte project line by line
  • πŸ“ Is Svelte Faster than React?
  • πŸ“ When to switch from React to Svelte
  • πŸ“ The Verdict

What is React?

Let's start with the one you’ve probably already heard about, React.

React is a progressive JavaScript frontend framework (or library depending on who you ask) that helps you build complex web UIs.

Created in 2013 by Facebook (now Meta) it was able to take a foothold in the frontend web development space pretty quickly.

React at its core is concerned with state and rendering state, which means to use it you have to add other libraries to handle client-side functionality and routing.

What is Svelte?

Svelte is also a front-end JavaScript framework with a focus on simplicity and speed.

It takes a more behind-the-scenes (magic) style approach where it interprets very basic-looking JavaScript code and handles UI and state management for you:

<script>
  let count = 0;
  function handleClick() {
    count += 1;
  }
</script>

<button on:click={handleClick}>
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
Enter fullscreen mode Exit fullscreen mode

Svelte was created in 2016 by a developer from New York Times, Rich Harris, for handling complex charts and graphs in a performant way. It grew from there into a highly loved competitor to the likes of React and Vue.

5 differences between React and Svelte

1. Svelte has significantly smaller build bundle size

The deployed bundle size of the identical (in functionality) applications we built below is 41.2 kB for React vs 2.1 kB for Svelte. That is almost a 20x reduction 🀯

To get these numbers I built an app with the same functionality in both Svelte and React. We will dive into those apps in React vs Svelte code breakdown section.

bundle size comparison
I built an identical app with React and Svelte. Look how much smaller the Svelte bundle is!

2. Svelte is easier to learn because of its simple syntax

Svelte takes a more behind-the-scenes magic approach, allowing you to write very low amounts of boilerplate or syntax sugar to accomplish complex bindings. The templating syntax is just HTML with some extra, which is considerably different and easier to learn than JSX (the React equivalent).

React reactive variable declaration:

react reactive variable declaration

Svelte reactive variable declaration:

svelte reactive variable declaration

Svelte looks like plain JavaScript but it has the exact same functionality as React. Updating the Svelte variable will automatically update the UI element it is placed in.

3. Svelte complies with pure HTML, CSS, and JavaScript

Svelte compiles the code you write into basic HTML, CSS and JavaScript. It does not need to be bundled with your code like React!

React.js needs to be present in a bundle to do all the proper virtual DOM diffing and creation, Svelte does not use a virtual DOM to handle UI. Instead, it opts for basic JavaScript element creation functions like document.createElement.

4. React has way more libraries and packages built for it

React has been around for 3 more years and is also the de facto king of JavaScript frameworks currently πŸ‘‘. Because of this, it has a ton of user and company-created packages.

The user-created packages are usually just to make things like routing, and state management easier or add a slider, lightbox, etc. These are not critical as Svelte has solid options and is compatible/adaptable to most JavaScript plugins.

Where it can get a bit more difficult is some integrations will create React packages well before any other framework. I’ve mostly run into this while working on Web3 projects on Solana and Ethereum.

5. React has React Native

React Native is one of the most highly used and supported cross-platform frameworks. It gives the ability to use React for creating iOS and Android applications. All from one code base. It has a ton of libraries, support and learning resources due to its maturity.

Although there are alternatives for Svelte like a NativeScript adaption called Svelte-native, these do not have the same reliability and feature set as React-native.

Is React a library or a framework?

Although React is often referred to as a framework, it can be argued that it is more of a library due to its scope. It specifically handles managing the state of a UI and keeping it in sync with the state of data in the app.

Because of this, it requires 3rd party libraries to handle app routing (React Router), UI creation (JSX), and state management between components (Redux).

Svelte on the other hand has all of the above features built in and is therefore more of a complete solution for UI management.

You can see most people agree that it is a library but there is still some debate πŸ‘‡

Comparing a React and Svelte project line by line

The best way to compare two pieces of web technology is to dive in and build with them. Building the exact same application can help to see how each library/framework handles different features.

We will take a look at:

  • Conditional rendering
  • Template looping
  • Updating state
  • Event hooks

What are we building?

Coding is thirsty work so we will be building a simple web app that allows a user to track how many cups of water (or 🍺) they are drinking throughout the day.

With the added bonus of showing a history of each cup that was drunk and when.

We will keep the UI simple to focus more on the underlying framework. (See UI below)

React

To breakdown the code first lets dive into some React concepts and terms πŸ‘‡

React has several types of syntax that you need to learn. Hooks, state, and templating (JSX) are the main ones.

Hooks - allow you to tap into the lifecycle of the app

State - allows you to update UI elements based on changes in data. It ties β€˜state’ (or more simply variable) changes to UI updates

Templating - allows you to use variables and JavaScript directly in the HTML

Styling with React components is typically handled from a separate .css (or .scss) file.

React code breakdown

Variables are set using the useState hook which allows for the variables to be updated and the UI to render those updates dynamically.

useEffect is used to set today's date on load of the application.

The JSX template is using basic {} notation as well as standard JavaScript function right in the HTML allowing for variables to be displayed and arrays to be looped over (using .map).

Svelte

Svelte takes a different approach with a much more β€˜behind-the-scenes magic’ style. Logic in looks mostly like pure JavaScript. In the background that code is doing almost the same thing that the React code does.

Svelte still has hooks like onMount and onDestroy but simply assigning a variable and having it fully reactive and accessible in the template (HTML) doesn’t require any special syntax sugar.

Another big difference is you can write CSS/SCSS right in a Svelte component. This is just an option though as you can still import styles just like in React, but I’ve noticed that most Svelte projects use in-style components.

Svelte code breakdown

The code above instantiates a cupsOfWater array sets a new date variable to the current date.

A function is declared that creates a new date and stores it in a variable called cup which is then prepended to the cupsOfWater array.

The template section is much closer to HTML with some added functions. Again using {} notation you are able to reference any declared variable from the &lt;script> section. You are also able to use event listeners (like on:click), conditionals (like {#if}) and looping with {#each}.

Explore and play with the code yourself here:

Is Svelte Faster than React?

Yes, all the way from fasting HTML generation to a faster build and development environment, Svelte outperforms React by a significant margin.

  • generating HTML
  • updating UI based on state
  • First contentful paint
  • Time to interact
  • Speed Index

All of these see a measurable difference with Svelte having the edge. The larger and more complex your application is, the more the difference will be noticed.

A great performance comparison can be seen in an article from Zeitspace.

Is Svelte better than React?

When starting a new project Svelte has enough going for it that it should always be a consideration.

Having said that, React is still absolutely dominating Svelte in usage. This can lead to issues with 3rd party plugin support, hiring, and longevity of the project.

To counter that though, the very accessible nature of Svelte’s syntax makes it very easy to pick up, especially for React developers. This is something that companies can lean into when hiring for a Svelte project (don’t limit yourselves to Svelte developers).

When to switch from React to Svelte

Svelte is an amazing option for building a complex website or web app. Many established companies have started using Svelte for internal and external applications:

  • 1Password
  • Avast
  • Chess.com
  • Alaska Airlines
  • Fusion Charts
  • Rakuten
  • GoDaddy
  • IBM
  • Square
  • The NYT
  • Philips
  • And more according to svelte.com!

This doesn’t mean that you have to put your current React apps into the trash though!

So when is it the right time to reach for Svelte?

If your app/website:

  • Requires a small bundle size because of bandwidth constraints
  • Needs to be as fast as possible
  • Needs to be built quickly

When is not the right time to reach for Svelte?

If your app/website:

  • Relies heavily on 3rd party integrations/tools
  • Will also be converted into a mobile application

These are quickly not becoming an issue but do require some research and due diligence before diving in.

The Verdict

This article has given you an overview on:

  • How Svelte is different from React
  • What makes Svelte better than React
  • How Svelte code compares to React
  • Where Svelte still falls short

With these comparisons under your belt, you should be able to make a decision on if you want

  1. Learn more about Svelte
  2. Use it for your next personal or work project

The best advice I have though is to jump in and try to build something in Svelte. If you’ve come from React I can almost guarantee you that you’ll appreciate the simplicity and speed.

Top comments (64)

Collapse
 
lexlohr profile image
Alex Lohr

Don't learn one framework, instead learn the concepts and patterns behind all of them – and the differences that can help you choose the right tool for the job.

No framework or library is a silver bullet. But the right choice can save you a lot of hassle.

By the way, svelte is great for smaller apps, but inexplicably doesn't scale too well. Try Solid.js.

Collapse
 
mikehtmlallthethings profile image
Mikhail Karan

I think 1. Learn JavaScript fundamentals really well and then 2. Learn framework fundamentals (any framework)

That will make it easy to switch to whichever one is needed.

Collapse
 
zhoorba profile image
Yehor Pidhornyi

Not the first time seeing such an answer, but it is kind of overwhelming without the right knowledge. Would be grateful if you could specify some of the core concepts and patterns that you're talking about

Collapse
 
lexlohr profile image
Alex Lohr

You are right; I reached the same conclusion last Thursday and I'm already on it. The article is actually almost ready, but I want to proof-read it a few times after getting it out of my head, so I'll publish it next week. In it, I elaborate on state, effects, memoization, reactivity and templating.

Thread Thread
 
zhoorba profile image
Yehor Pidhornyi

Awesome! Eagerly await for the article πŸ”₯

Thread Thread
 
lexlohr profile image
Alex Lohr
Collapse
 
ivan_jrmc profile image
Ivan Jeremic

Finally someone giving the right answer to beginners.

Collapse
 
slidenerd profile image
slidenerd

what do you mean by " svelte is great for smaller apps, but inexplicably doesn't scale too well. Try Solid.js." why does svelte fail for larger apps? what does solid have that svelte doesnt and more importantly what is your affiliation with solidJS?

Collapse
 
lexlohr profile image
Alex Lohr • Edited

Have a look at this: dev.to/this-is-learning/javascript...

I'm not sure why this is the case - I would submit a PR to Svelte if I knew how to fix this.

Svelte outsourcers a lot of complexity into its wonderful transpiler. Solid only uses its transpilation for efficient templating and re-uses its reactive system for everything else.

And why is it important that I am part of the Solid.js community? I have merely stated an observed fact. You can test it for yourself.

Collapse
 
dan1ve profile image
Daniel Veihelmann • Edited

I learned Svelte before React, and now React feels unnecessarily complex every time I use it πŸ™ˆ

I sort of disagree with the "React has more libraries" part by the way. You can use any JS library with Svelte.
So phrased differently, you could say "React requires libraries to be wrapped before usage"

Collapse
 
mikehtmlallthethings profile image
Mikhail Karan

Yeah it's always tough for me to go back to a React project after working in Svelte!

Collapse
 
jareechang profile image
Jerry

The trade-off is now you need to maintain a custom svelte-react wrapper.

imo, generally, more code, more problems.

Guess what now you need documentation, tests and more!

Collapse
 
leob profile image
leob • Edited

Great article, well-written ... of course a simple code example like this does not prove that Svelte has all of the imaginable bases (use cases) covered like React has, but I'll just assume it has.

So we can conclude that Svelte has only pros, no cons, compared to React (except that React dominates "the market", but that's not really a characteristic of React itself but more a meta-characteristic).

The only "downside" of Svelte might be - that SolidJS might be even better? :)

Collapse
 
mikehtmlallthethings profile image
Mikhail Karan

Haha, I need to try SolidJS, been hearing great things.

Collapse
 
leob profile image
leob

Yeah, the real competition should be between Svelte and Solid, not between Svelte and React - but we're all "forced" to use React, even though it's inferior in almost all respects, because, well, it's the proverbial 900 pound gorilla in "the market" ... kind of saddens me, but oh well.

Collapse
 
oshox profile image
oshox

SolidJS and/or Marko for 2023. Check out Ryan Carniato on YouTube to find out why.

Collapse
 
mikehtmlallthethings profile image
Mikhail Karan

Interesting I'll for sure check it out!

Collapse
 
oshox profile image
oshox

I should probably also mention that Ryan is active on dev.to

dev.to/ryansolid

Collapse
 
z2lai profile image
z2lai

An effective way to learn something is to compare it to what you already know. Great comparison with React, it gave me a the gist of what Svelte is.

In all my time looking for jobs though, I have not seen a single job that had Svelte written anywhere (Canada). Interesting to see adoption by those big websites though. Excellent article!

Collapse
 
mikehtmlallthethings profile image
Mikhail Karan

It's slowly becoming more propular and easier to adopt. SvelteKit (next.js equivilant) has just been fully released out of beta (v1.0.0) so that should help with adoption.

Collapse
 
bookercodes profile image
Alex Booker

Svelte definitely looks cleaner and the idea of smaller bundles is appealing!

Great post, @mikhailkaran!

Collapse
 
mikehtmlallthethings profile image
Mikhail Karan

Appreciate all the help from you and team on the post!

Collapse
 
yaroslaff profile image
Yaroslav Polyakov

Pleasure, simplicity and beauty are very important.

"Pleasure" is non-technical term, not easy to measure but very important.

Almost 10 years ago I had dilemma, what next modern language to learn: Python vs Ruby.
Then I examined list of popular ruby projects and list of popular python projects. And what I've found:

  • Both languages are popular, both are "good"
  • Almost all ruby projects were related to "work"
  • Python had lot of "work" projects too, but also it had many projects which had no business value, which were written just for fun!

So, I decided Python is more fun to use. And yes, after many years with Python I still think I did right choice. It's pleasure to use Python both for work and for fun. And I work more efficiently when it's pleasure to work.

Also I think Python won this race and now much more popular. Because of "pleasure".

Now, I have little more then "hello world" experience with most popular frameworks and I'm impressed with Svelte and working with it. Clean, simple, easy. This is very important. And I think these defines future.

Collapse
 
horstcredible profile image
Horstcredible

This is actually a really nice comparison.
Good to see that React gets more and more competitors which begin to reach the right level of stability and reliability to be a real competition.

This will lead to massive improvements in the React.js project, too, I can imagine.
I don't think Facebook wants React to be beaten by the new kids on the block and that they will rather choose to improve React to be much better in performance.

Also I wonder what else you could use at the moment as an alternative to React and in which cases?
What's currently good for creating different sized projects?
Small ones -> Svelte, ...?
Mid sized ones?
Enterprise level big ones?

Collapse
 
mikehtmlallthethings profile image
Mikhail Karan

Vue.js is a great alternative that has more and more usage in the real world.

The smaller ones like Solid and Astro are also creeping up.

Collapse
 
mikehtmlallthethings profile image
Mikhail Karan

There is a mistake in the article.

When comparing Svelte vs React I mentioned Svelte has a built in router and that is not true.

Will be doing a minor rewrite of that section shortly.

Sorry everyone!

Collapse
 
yuridevat profile image
Julia πŸ‘©πŸ»β€πŸ’»

Thanks for this detailed comparison πŸ™

Collapse
 
mikehtmlallthethings profile image
Mikhail Karan

No problem!

Collapse
 
_bkeren profile image
''

Your Svelte code breakdown section shows react snippet. Can you fix it?

Collapse
 
mikehtmlallthethings profile image
Mikhail Karan

Great catch, sorry about that.

Just edited it with the right sandbox.

Collapse
 
heyhadi profile image
Munawirul Hadi

Svelte is way better than react, has less boilerplate, easier to maintain and easier to learn. If I am to build my personal project, Svelte is the way to go for me.

Collapse
 
mikehtmlallthethings profile image
Mikhail Karan

Same.

Collapse
 
rizmyabdulla profile image
Rizmy Abdulla • Edited

Hey, i'm going to take a look at svelte for my project.

What do you'll recommend for create a school website from react and svelte

Collapse
 
mikehtmlallthethings profile image
Mikhail Karan

The svelte documentation has a great tutorial built in it! svelte.dev/tutorial/basics

If you need something a bit more guided I've created a Svelte for Beginners course on Udemy: udemy.com/course/svelte-for-beginn...

Collapse
 
sohrab09 profile image
Sohrab Hossain

Great Article brother.

Collapse
 
mikehtmlallthethings profile image
Mikhail Karan

Appreciate it Sohrab!

Collapse
 
raddevus profile image
raddevus

That's a great article & now that I've learned quite a bit about React I'm going to take a look at Svelte. Thanks for sharing.

Collapse
 
purva2803 profile image
Purva Rajyaguru

Keep writing πŸ₯³

Collapse
 
mikehtmlallthethings profile image
Mikhail Karan

Will do! 🫑

Top Posts from the React Ecosystem

1. Changes In The Official React Documentation

The former React Docs Beta has been officially released as the updated React documentation at react.dev after years of hard work and refinement. Check out the brand new React Docs: What’s New in the Updated React Docs

2. CRA's Time is Over

React developer team has removed create-react-app (CRA) from official documentation rendering it no longer the default setup method for new projects. The bulky setup, slow, and outdated nature of CRA led to its removal: create-react-app is officially dead

3. How to Fetch Dev.to Articles for Your Portfolio

Integrate the articles of your Dev.to profile into your personal portfolio with either React, Vue, or Next.js by following these simple steps. It outlines how to include frontend to pull the information and correctly utilizes the Dev.to API: How to Fetch Your Dev.to Articles for Your Portfolio with React