React vs Svelte: A Comparison Between Them

Svelte is a JavaScript compiler which allows you to build user interfaces in a reactive way using a custom syntax. While React frameworks do the majority of the work in the browser, Svelte shifts that work to a compiler while building the app. It doesn’t use virtual DOM like React does, but it writes code that surgically updates the DOM when the state of the app changes. So, the very important distinction is that Svelte is a compiler and React uses DOM manipulation.

Now what is the difference?

It means that with Svelte you also use a certain syntax to write your code, a component for the architecture, markup and styles with instructions of JavaScript but when you build your application for production, you actually run the Svelte compiler that automatically goes all over the code files. Therefore, the complier goes all over the project and creates a bundle.js file with a bunch of JavaScript instructions that will then execute on the DOM in the runtime. It does not add some extra code or some extra package, nor any framework code which would execute at runtime.
Whereas in React, when you build your application the code is optimized and compiled during development to some extent, but then it works in conjunction with the library or framework package. So, you need to ship both your optimized application and framework code meaning that obviously you need more code than just a bunch of instructions.

Features of Svelte and React

Svelte gives you a super small bundle in contrary to React who is much larger, and also the code in Svelte is highly optimized and very fast during production.
Having a small bundle and fast code matters but it’s not everything. In Svelte you get a certain core set of features you can work with when you develop. You have a core syntax for outputting data or reacting to events but that is basic yet. It is very similar to React. React is all about creating components and then rendering them to the screen and reacting to user input.
Svelte doesn’t give any additional improvements like extra features in React. React has lots of additional improvements and continuously improves over the years. In addition, React actively controls your code and runs it and tries to optimize when the DOM is updated by automatically displaying a loading spinner if you are waiting for some data. All of these are all some behind the scenes tasks where React helps you which Svelte doesn’t.

Syntax Difference

Below we show the difference in their syntax. Notice that the Svelte snippet is almost pure HTML/JS and has fewer lines of code than the React example.

import React, { useState } from 'react'

function Example () {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  )
}

And here it is the Svelte app

<script>
  let count = 0
</script>

<div>
  <p>You clicked {count} times</p>
  <button on:click={() => count+= 1}>
    Click me
  </button>
</div>

Notice that the Svelte app uses custom syntax when it comes to DOM events rather than JavaScript predefined syntax. React has onClick whereas Svelte on:click.

Popularity

Svelte is a popular new framework but with a small community. Although, it’s gaining popularity over the years it’s still small compared to the React framework. React is extremely popular and relatively mature and is highly actively developed especially with React Hooks and is used by major enterprises.
According to npmtrends in the past 6 months Svelte has received attention but it is still fighting to gain adoption with 120,238 downloads, whereas React has a rate of 9,626,409 downloads which makes it a significant difference between them.

Conclusion

Based on the aforementioned differences between the frameworks, Svelte is blazing fast in runtime and comes with small bundles and fewer lines of code. It also doesn’t require framework code to add it at run-time. In contrary, React has a more active community and more improvements in certain features and therefore widely used. Because of its web-based model of HTML, CSS and JavaScript, it’s easier working with Svelte. Whereas in React, you need to learn additional extensions like JSX syntax and CSS incorporated in Js.
However, depending on the size of the application, React is preferred for large and complex applications as it offers more plugins whereas Svelte is preferred for smaller apps or for apps in everyday use.
Overall, both of them are practical and efficient for User Interfaces and it’s up to your preferences to choose between them.