React, Svelte and Solid: The differences and advantages

What is the best JavaScript framework for each project? React, Svelte and SolidJS are three of the best-known frameworks in this scenario, and in this article they will be tested and compared in every respect.

The world of front-end development has been flooded with a series of new JavaScript frameworks, each with different functionalities and purposes. Among these frameworks, React, Svelte and SolidJS are some of the most widely used, each captivating a different audience with different ambitions.

This article aims to analyze the differences between these frameworks and question the need for so many options in the front-end development market. I intend to approach this subject from the point of view of the developer, who is looking to choose the most suitable framework for the development of future projects.

The test

Therefore, I considered it appropriate to develop a small project, a chat window (Figure 1), to test each framework in a real development environment.

To do this, I considered the following requirements:

• the reception of information sent by the user;
• dynamic content updating;
• the passing of information between components.

Figure 1 — Final version of the test

As far as the page’s styles are concerned, they were all implemented using a Tailwind CSS template created by Rob Stinson.

The project’s GitHub repository is available, showing the implementation on each of the frameworks.

React

React revolutionized the web development space when it was launched, becoming the most widely used JavaScript front-end framework in the world.

One of the most important features of React is its use of the virtual DOM, which is able to update the different elements of the interface individually as a way of improving the application’s performance. React also uses the .jsx file extension, which is synonymous with a junction between HTML and JavaScript that is both accessible and easy to understand.

React is also characterized by the use of React hooks. These hooks are used to make it easier to use, update and manipulate states within each project. In this case, the useState hook (Figure 2) was used to define the values relating to: the content of the message sent, the sender of the message and the value of the text field.

Figure 2 — UseState declaration.

The inputValue (Figure 3) is assigned the value of the application’s text field each time it is changed, via setInputValue. Then, when the user submits the message, the sendMessage function (Figure 4) is executed.

Figure 3 — Message sending form

This function, in turn, inverts the value of the subject, identifying the author of the message. It also sets the value of the message to be equal to the current value of the input and, finally, deletes the value of the input.

Figure 4 — sendMessage function

After all this information has been collected, the Message component receives these values via props, one of the ways of sharing data between components within a React application, which sends information from the parent component to the child using parameters.

Through another React hook, useEffect, it is possible to declare functions that will be executed as secondary effects whenever there is a change or update to the values defined as dependencies.

This effect hook (Figure 5) is triggered whenever the values of the props sent to the component are updated, and its function is to add the values of the message just sent by the user to the array (messages). To do this, I use setMessages, to change the value of the array, and spread operators, to copy all or part of an array or object into another.

Figure 5 — useEffect

At the end of all this, a map is made through the messages array that returns each message, assigning the corresponding values and styles to each one.

Svelte

Svelte stands out for offering an innovative approach to front-end development, presenting itself as an effective alternative to React. The absence of a virtual DOM and compilation during the build process guarantee Svelte’s efficiency in creating optimized web applications.

Svelte also differentiates itself by not using .jsx, opting instead for the .svelte extension. The structure of a Svelte document differs significantly from the conventional .jsx format, with the HTML written directly in the body of the document, while the JavaScript logic is contained in a <script> tag.

Another major difference between Svelte and React is the absence of hooks such as useState. Since this hook is used in React to update a variable in real time, it is no longer necessary in Svelte, since in this framework the state control within the application is done automatically.

Thanks to optimizations like these, in Svelte it is no longer necessary to declare a function or reference to collect the value of an input in real time, and the bind:value parameter (Figure 6) is responsible for simplifying this task.

Figure 6 — The same input, in Svelte and React

In the Message component, the useEffect hook is replaced by the afterUpdate function (Figure 7) which is triggered whenever any of the component’s states are updated.

Figure 7 — AfterUpdate function

SolidJS

SolidJS introduced yet another paradigm shift in JavaScript front-end development, through its direct manipulation of the DOM and its reactive structure, which is responsible for making each Template be rendered in its entirety at once, unlike React’s approach which renders each component from “top to bottom” in an abstract way.

During the development of the test in SolidJS, the differences with React, in terms of syntax and structure, were not very noticeable, as both frameworks are very similar in these respects.

The only relevant differences between the syntax of React and SolidJS are the use of Signals instead of states, for the real-time updating of states, and the replacement of React hooks with standard functions, such as the createEffect function, which has the same role as useEffect in React.

That being said, SolidJS was the only framework that required the implementation of logic (Figure 8) to prevent the same message from being displayed more than once, given that it was the only version of the project that manifested this problem.

Figure 8 — Logic to avoid repeating messages

Intangible differences

This section of the article is reserved for understanding the less apparent differences between each of these frameworks.

The first major difference is the performance of each framework. To compare them, I’m going to use the JS Framework Benchmark developed by a member of the community and which can be consulted via its GitHub repository.

In this respect, React stands out as the slowest competitor, taking longer to complete tasks in all scenarios than Svelte and SolidJS. However, it’s important to note that the difference in time taken per task between React and the others is quite large, with React being up to 8 times slower than the competition.

On the other hand, the difference in performance between SolidJS and Svelte is minimal, with most tests running faster in Svelte, but by margins of between 2 and 20 milliseconds per task.

Despite React’s clear disadvantage compared to other frameworks when it comes to performance, this is countered by its huge community and community library that has modules for any scenario, need and project.

Svelte and SolidJS also have an extensive library, however, these are still small compared to React’s, as is its developers’ community, as illustrated by the Stack Overflow Survey 2023.

Figure 9 — Popularity of each framework according to the Stack Overflow Survey 2023

Conclusion

In short, the discussion about JavaScript frameworks and their position in the market has no definitive answer, as they continue to innovate in this area in unexpected ways.

For those looking for a framework with extensive community support and a vast library of modules, React remains the market standard. Svelte, on the other hand, offers a unique experience, with its own syntax, and is an alternative for those who don’t feel confident developing projects with a syntax like that of React. Solid, on the other hand, is ideal for those who want an environment similar to React, but focused on performance, even if this means less support from the developer community.

In conclusion, each framework has its own target audience and it is crucial to understand their differences before making a definitive choice between them.

References

Install Tailwind CSS with SolidJS — Tailwind CSS

Install Tailwind CSS with SvelteKit — Tailwind CSS

Install Tailwind CSS with Create React App — Tailwind CSS

SolidJS

SolidJS

Introduction

SolidJS vs. React: The Go-to Guide | Toptal®

GitHub — krausest/js-framework-benchmark: A comparison of the performance of a few popular…

Stack Overflow Developer Survey 2023