The Front-End world never gets tired of innovating something new. Nowadays, we have lots of options to choose from if we want to build a website. In development itself, we have the main players in the field that most fellow developers are keen on. Among those available tools, are Svelte and React.

Although the most common pattern of comparison articles is:

We will have a good look at how each performs things in their own playstyle, yet achieves something similar.

Write Less Code

Svelte offers a compelling advantage over React through its concise syntax and code efficiency. Unlike React, which relies on a virtual DOM and JSX (JavaScript XML) to create and update the user interface, Svelte takes a different approach that leads to significantly leaner and more straightforward code.

Let’s take a look at how we would create a simple app that add 2 numbers based on user input in React and Svelte

In this example, we are given example of how bind:value in Svelte can replace the usage of state and onChange event in React JSX. This is one of many simplification that Svelte has to offer.

No Virtual DOM

In the early days of web development, in order to make a website interactive with user inputs, we manipulated DOM directly with JS query selectors or JQuery.

When modern JS Libraries come out, this idea is quite deprecated since the virtual DOM has taken over it. React and Vue became game-changer. The approach is considered to be much faster, and more importantly — for me — we don’t need to select a specific DOM element and manually update it as the data changes.

In React, updating the virtual DOM has some steps. Such as:

• Creating Virtual DOM
• DOM Diffing
• Reconciliation / Sync actual DOM with updated virtual DOM

Turns out, this process isn’t resources-free and React will need additional code to make Virtual DOM exist and run properly.

Let’s take a look at how React and Svelte handle renderings:

In Svelte, however, it reverts directly to the DOM without us manually selecting and updating the DOM as the JQuery does.

Svelte is actually a compiler that turns our code into highly optimized Javascript code.

Using its component-based architecture, Svelte tracks dependencies between variables, allowing it to accurately determine when changes to one variable will affect other parts of the component.

Due to this, Svelte won’t need some codes to make Virtual DOM. This is one of the reasons that Svelte’s app has a much smaller build size of the application to React.

I’ve tried to develop a simple library book web app written with Svelte and React. This is how the build size compared:

Performance

Optimized code from compiled Svelte code automatically ensures the reactivity element in the actual DOM.

This is different from React in which we should care about memoizing values and functions with useMemo and useCallback to prevent unnecessary re-renders.

I use Lighthouse to check the overall performance of my websites. Here, we can actually see how Svelte and React perform in Lighthouse: