Svelte vs React. Which one would I pick?

As a React developer, I’ve always been curious about Svelte. Everyone speaks highly of it, but I never had the chance to try it—until now.

In this blog post, I’ll share my first impressions of Svelte compared to React and discuss which one I’d pick for my next project.

The Similarities

Let’s start with what makes both frameworks similar.

The most important similarity is that they both rely on state, which, when changed, updates the DOM.

Of course, they use different syntax to declare and modify state, but the core principle remains the same.

For instance:

• useState in React is $state in Svelte.
• useEffect in React is $effect in Svelte.

The Core Differences

The key difference, in my opinion, is that React is essentially "JavaScript on steroids," whereas Svelte, thanks to its compiler, enables powerful functionality with minimal effort.

To illustrate:

• In React, when you change the state, the component updates the Virtual DOM, compares it with the real DOM, and applies the necessary changes. If not handled properly, unnecessary Virtual DOM updates can be triggered, which isn’t a problem for small apps but can lead to performance issues in larger ones.
• In Svelte, you don’t need hooks or special functions—just update a variable like any other, and Svelte applies changes directly to the DOM without the overhead of a Virtual DOM.
• With React, you have to think in terms of re-renders. In Svelte, you simply update variables, and the framework takes care of the rest.

Here’s an example of the same logic implemented in React and Svelte so you can see how much simpler Svelte can be.

Svelte

<script>
    let name = $state("")

    function submitForm(event) {
        event.preventDefault()

        alert(`Your name is ${name}`)
    }
</script>

<form onsubmit={submitForm}>
    <label for="name">Enter your name:</label>
    <input id="name" bind:value={name} />
</form>

React

import { useState } from "react";

export default function NameForm() {
  const [name, setName] = useState("");

  const submitForm = (event) => {
    event.preventDefault();
    alert(`Your name is ${name}`);
  };

  return (
    <form onSubmit={submitForm}>
      <label htmlFor="name">Enter your name:</label>
      <input
        id="name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

As you can see, with Svelte, we declare the state using a simple variable, bind it to an input, and that’s all.

With React, we have to use hooks. In this case, it doesn’t make the code significantly more complex, but as the app grows and more advanced data structures like arrays and objects are used, hooks can become more cumbersome to manage.

So, Is Svelte Better?

From the example above, it might seem that Svelte is clearly superior. However, there’s a trade-off.

Its Unique Syntax

Since React is essentially JavaScript, once you learn its quirks, it feels natural to use. Svelte, on the other hand, has its own syntax and peculiarities that take time to learn.

For example:

• In React, passing components as children is straightforward, you can have multiple components in a single file, and extracting reusable logic into hooks is easy.
• In Svelte, having multiple components in a file requires workarounds, components can’t be passed as props, and separating logic from HTML requires specific conventions.

"That Doesn’t Seem Like a Big Deal!"

You’re right—learning a new syntax isn’t a huge issue, especially if it allows you to build logic more easily than React.

But there’s another drawback that makes me lean toward React for my next project.

React Has a Massive Ecosystem—Svelte Doesn’t

Because React is so popular, you can find a library for almost anything. With Svelte, it can be trickier.

Yes, Svelte’s ecosystem is growing, with tools like SvelteKit (which functions similarly to Next.js for React) and support for many JavaScript libraries. However, React's ecosystem is vast, with countless libraries, tutorials, and community resources.

For now, this makes React my go-to framework for larger projects.
So, Which One Should You Pick?

At the end of the day, the best tool is the one that helps you achieve your goals.

• If your team is experienced in jQuery and PHP, those are the best tools for you.
• If your team masters Svelte, use Svelte.
• If you’re comfortable with React, stick with React.

Both React and Svelte are excellent frameworks, each with its strengths and weaknesses. Choose the one that fits your needs.

And if team composition and previous background don’t matter to you:

• Pick React if having a big ecosystem of tutorials and libraries is important to you.
• Pick Svelte if you highly value a more straightforward syntax.

Which One Will I Pick?

For big projects, I’ll stick with React because I know it well, and it has the largest ecosystem of libraries and tutorials.

However, I’ll continue exploring Svelte. I really enjoyed working with it, and who knows? Maybe I’ll discover I was wrong and end up using Svelte for my big projects.

Conclusion

• React is king when it comes to libraries, tutorials, and community support.
• Svelte is clean, efficient, and has less boilerplate but comes with its own quirks.

Try both and decide for yourself!

Additional Resources

Here are the best Svelte tutorials I found:

Svelte Crash Course
Svelte & SvelteKit Introduction

Other:
Simple todo app I build in svelte

Acknowledgments

Photo by Andres Ayrton: https://www.pexels.com/photo/woman-showing-apple-and-bitten-doughnut-6551415/