DEV Community

Cover image for How I moved from React to Svelte
Artur Kedzior
Artur Kedzior

Posted on • Updated on

How I moved from React to Svelte

In today's ever-evolving front-end landscape, React has been the crown jewel for many developers, including me. Its component-based structure, the efficiency of the Virtual DOM, and the vast community support made it a clear favorite.

Bill Burr However ...

Another thing called Svelte reached my ears. So I jumped into messing around with it and here is what I found:

1. Why Svelte?

Before diving into the transition, it's important to understand why one might consider moving. Svelte brings:

Simplicity: No Virtual DOM, less boilerplate, and straightforward syntax.

Performance: Svelte compiles components to vanilla JavaScript at build time, making it incredibly fast.

Reactivity: Reactive statements make data binding a breeze.

2. Initial Steps

The first thing I did was set up a Svelte project using Svelte's official template. Then, I spent some quality time with the official Svelte tutorial, which provides hands-on experience with the framework's core concepts.

3. Translating Components

Moving components from React to Svelte involved understanding the subtle differences:

JSX vs Svelte's Template Language: Instead of JSX, Svelte uses its HTML-like syntax, which made templates much more readable.

State Management: In Svelte, mutable state is handled with simple variables, and reactivity is achieved with a mere $: before a statement.

4. Event Handling

While React uses synthetic events, Svelte employs native event listeners. Transitioning meant:

Replacing onClick with on:click.

Eliminating event.persist() since Svelte uses native events.

5. Lifecycle Methods

React's lifecycle methods such as componentDidMount or componentWillUnmount got translated to Svelte's onMount and beforeDestroy.

6. Styling

Moving from CSS-in-JS (or any other React styling paradigm) to Svelte's scoped styles was refreshing. Each Svelte component gets its own encapsulated style, reducing the fear of global styles interfering with component-specific designs.

7. State Management on Steroids

While React has Context or Redux or Zustand for global state management, Svelte offers stores. These writable and readable stores made state management straightforward and less verbose.

8. Integrations & Plugins

Transitioning also meant looking for equivalent Svelte plugins and integrations or creating custom solutions when needed. Luckily, the Svelte community is robust and growing, offering ample resources.

9. Community and Support

I won't lie; the React community is vast. But the Svelte community, although smaller, is enthusiastic and rapidly expanding. Platforms like Discord, Reddit, and Stack Overflow provided ample support during my transition.

10. Conclusion

The journey from React to Svelte was awesome. While both have their strengths and use cases, Svelte's simplicity, speed, and clean syntax it's all I wanted.

All my new projects this year were built with Svelte. Here is my last one (a solo adventure):

https://salarioo.com - a job board with salaries only. 🚀

Salarioo.com

On another project (full blown e-commerce) I encouraged my team of experienced React developers to try it out and they loved it and yes we have almost finished it using Svelte.

That said I doubt I will go back to React. ⚰️

In another words Svelte ruined React for me just as The Expanse ruined every other space science fiction.

🔥

The Expanse

🔥

Have you tried Svelte yet?

Share your experiences and thoughts below and thank you for reading!

If you enjoyed this post and want to stay updated, follow me on Twitter for the latest updates and check out my projects on GitHub.

May the code be with you!

Top comments (56)

Collapse
 
webjose profile image
José Pablo Ramírez Vargas

I'm in the investigative part of my transition. I need micro-frontends with single-spa and I want Vite.

Svelte is so simple in comparison, it's just not fair. I think people will soon realize that Svelte is the uncrowned king. Is not a matter of IF, it's a matter of WHEN.

What I disagree with and I'm vocal about it, is statements like this:

While both have their strengths and use cases...

I keep daring people to tell me which use cases can React handle that Svelte cannot. I feel that authors are just being political about it.

Collapse
 
kedzior_io profile image
Artur Kedzior

Svelte is so simple in comparison, it's just not fair. I think people will soon realize that Svelte is the uncrowned king. Is not a matter of IF, it's a matter of WHEN.

Yes!

I keep daring people to tell me which use cases can React handle that Svelte cannot.

One of my big use cases doesn't actually relate to what one technically can do and can't but to the fact that React has a component for nearly everything you would ever need while in Svelte you need to do it yourself. For some projects it is a deal breaker. Another big advantage of React is that teams can do both React Native and React Js. That's one of the reasons we haven't switched yet on one of my projects. SvelteNative needs to be a thing for Svelte to be adopted by a lot of companies.

Collapse
 
webjose profile image
José Pablo Ramírez Vargas

Ah, I see. Well, with Svelte cutting down so much in terms of code, I bet it frees up time to play around and make components. 😄

So the phrase is actually a euphemism for "not a big community". Time will most likely take care of that one. I must say, though, that I have seen some VERY impressive things made with Svelte. There's a Doom game out, and the REPL on steroids that can be used to create SvelteKit projects and who knows what else. There are some very capable people out there interested in creating and sharing.

Thread Thread
 
kedzior_io profile image
Artur Kedzior

Ah, I see. Well, with Svelte cutting down so much in terms of code, I bet it frees up time to play around and make components.

Hahah nice one. If that's a simple component that hey, why not and it's fun. When we are talking about something more complex components we are talking about weeks of work.

Of course the community will grow and I'm all for that and I hope my posts will contribute to it. Yes there are impressive things donde in Svelte but at the end of the day the decision takers in the companies will look at tech that has all perks.

There's a Doom game out

It should be added here: reddit.com/r/itrunsdoom/
:-)

Thread Thread
 
webjose profile image
José Pablo Ramírez Vargas

Wish me luck, I'll present Svelte to Intel the 2nd week of September. I will be showcasing a simple timer and how it was more complex to make it in React vs Svelte. I animated the Svelte one to add flare to it.

Thread Thread
 
kedzior_io profile image
Artur Kedzior

Hahah nice and good luck!

To make them go for it 100% just tell them that the guys at AMD use it for Ryzen related stuff :-)

Collapse
 
zhamdi profile image
Zied Hamdi

There's not much code you can share between react js and react native anyway I'd say. So it makes sense to write the web in svelte and the mobile in Flutter, add once you're free from react on the web, you can afford complete liberty

Thread Thread
 
kedzior_io profile image
Artur Kedzior

In my case it's not much of a code share but team's skills. In one of my projects the guys doing React Native are also doing FE for an internal Dashboard and they swing React in both worlds like champs.

Thread Thread
 
zhamdi profile image
Zied Hamdi

Good point, optimizations and tricky stuff is the same on react native and web

Collapse
 
psypher1 profile image
James 'Dante' Midzi

I'm currently on the same journey. I'm really put off by the decisions React/Next have made so I've been exploring Svelte and Sveltekit.

As soon as I figure out authentication I'm switching completely

Collapse
 
kedzior_io profile image
Artur Kedzior

I bet you can get things like Firebase, Supabase working in no time but again I'm the guy that hooks SvelteKit with dotnet API. I would never dare to write server code in JavaScript.

Collapse
 
psypher1 profile image
James 'Dante' Midzi

Hahaha.... I hear you.

Yeah, that's what I saw. I've been figuring a setup with Supabase. I've had a not so good experience with Firebase

Thread Thread
 
kedzior_io profile image
Artur Kedzior

I'm running Firebase on a big project and it has been ok until we tried to merge accounts aka keep single Firebase record with multiple emails and phone numbers.

and yes JavaScript on the server is a big no no for me.

Thread Thread
 
psypher1 profile image
James 'Dante' Midzi

When you try to do something more is when all our struggles begin. 😅😅

Thread Thread
 
kedzior_io profile image
Artur Kedzior

That's my best answer to this:

Image description

Thread Thread
 
psypher1 profile image
James 'Dante' Midzi

🤣🤣🤣🤣

Collapse
 
jkhaui profile image
Jordy Lee

Curious which decisions by React/Next you disagree with? Assuming RSCs but wondering if there’s other aspects too

Collapse
 
psypher1 profile image
James 'Dante' Midzi

Well, yes... RSC is one of my issues.

  • The app router is not ready despite what they say. if they had the time to make all these changes - they could have improved on the pages router.
  • The folder based routing is a poor implementation of what Sveltekit has been doing already.
  • the number of things that are experimental currently is not a good sign to me (you have to turn on experimental for things that were working previously to work)
  • The whole of the internet is being made to accommodate what team vercel wants.
Collapse
 
zhamdi profile image
Zied Hamdi

That's a great article, I moved to svelte but wrote a project from scratch to allow employees to build an open resume (free json and pdf downloads) boostrapped by exporting their LinkedIn and helped by AI.

Svelte is very powerful, compared to the old next.js, apollo and react architecture i had before.

My project is at cvlink.in, maybe it makes sense to connect Salarioo with CvLink

Collapse
 
kedzior_io profile image
Artur Kedzior

My project is at cvlink.in, maybe it makes sense to connect Salarioo with CvLink

Oh that is beautiful. Let me sign up and let's talk!

Collapse
 
zhamdi profile image
Zied Hamdi

Cool, let's plan that

Thread Thread
 
kedzior_io profile image
Artur Kedzior

Any chance we could talk via Twitter?

I have some questions about the platform.

By the way great work!

Thread Thread
 
kedzior_io profile image
Artur Kedzior

@zhamdi forgot to mentioned my twitter account: twitter.com/KedziorArtur

Thread Thread
 
zhamdi profile image
Zied Hamdi

I just saw your comment, I'm following you but didn't manage to write you a message. I'm @zhamdi on twitter too

Collapse
 
loktar00 profile image
Jason • Edited

When you use React your bundle is also vanilla js... Also a little confused by the mention of componentDidMount along with the other life cycle methods, that's the class way it's been recommended for years to use hooks.

For styling in react you can scope them the same way using css in js or better yet css modules.

Svelte is definitely a side grade vs an upgrade glad you're getting along well with it.

Collapse
 
stevetaylor profile image
Steve Taylor

React is still there at runtime. Svelte isn’t. However, I don’t think the difference is nearly as significant as all the other ways Svelte is a big step up from React. Solid, for example, keeps its framework at runtime just as React does, but it also results in small bundles and slightly edges out Svelte in terms of performance, at least in some cases.

Collapse
 
kedzior_io profile image
Artur Kedzior

In most cases performance wise it probably won't matter. In one of my SAAS I found myself in situations where I actually did have performance issues and had guys having years of experience look into it and we had hard time figuring what caused re-rendering. I also got tired of making everything into a component. I know some like it but .....me coming from the backend development I always think of component as shareable piece of code. But hey I understand why it is done like that in React and I followed.

... Solid ...

Yes this is something I looked into next and loved the idea. I tried to use it with Astro.js and Next.js because I thought oh nice I can migrate one of my SAAS (excel like project requiring good perf) done with React + Next.js + mui.com (which is probably one of the best collection of React UI tools out there) without too much effort until I hit the problem with FOAT, so I abandoned it and forgot it completely. I should probably look into it again.

Thread Thread
 
stevetaylor profile image
Steve Taylor

In most cases performance wise it probably won't matter.

For context, I work on smart TV apps. Their browser runtimes can be quite slow, so performance is always front of mind.

Thread Thread
 
kedzior_io profile image
Artur Kedzior

Yeah those are the cases where performance does matter.

TV app would be developed as a native app rather than web app right?

I'm curious, what do you use to build these?

Collapse
 
kedzior_io profile image
Artur Kedzior

it's been recommended for years to use hooks.
Yep, I would need to update the article and talk about hooks.

For styling in react you can scope them the same way using css in js or better yet css modules.

Same here. Thanks for pointing this out.

Svelte is definitely a side grade vs an upgrade glad you're getting along well with it.

Will share once in production with the big project we are about to go live with. I'm sure it will have its own "gremlins".

Collapse
 
shanwshaw profile image
shawnshaw

I only need CSR(client side rendering) and was unhappy with Svelte's SSR-first approach, now React is becoming SSR-first as well, I might need go back to Vue.js which remains to be the only framework that separates its SSR work from its core that remains to be CSR only.

So no svelte for me for sure, I wasted a few months with it unfortunately. I do not need to set flags here and there and read your SSR content from Sveltekit to get a CSR out, it makes things unnecessarily complicated for my needs.

Collapse
 
kedzior_io profile image
Artur Kedzior

Too bad you had bad experience with it but it seems that your problem is a matter of quick configuration change to static adapter and that's it:
kit.svelte.dev/docs/adapter-static

... with Svelte's SSR-first approach, now React is becoming SSR-first as well ...

dev.to/mandrasch/rich-harris-expla...

I might need go back to Vue.js which remains to be the only framework that separates its SSR work from its core that remains to be CSR only.

Yeah Vue is great and I have used for years injecting "reactivity" into ASP.Net Core Razor pages.

As an alternative good friend of mine uses this for his startup: lit.dev . He has been praising it for simplicity.

Collapse
 
shanwshaw profile image
shawnshaw

tried that and dislike sveltekit since I need zero SSR get involved.

so I went back to svelte, used svelte-spa-router to do client side routing(by the way, can svelte add a client side router by default), then I was looking for a state management solution(is context api my only option for CSR state management?), then for more options on UI libs(sveltestrap)...

my hope is that, svelte adds a client side routing built-in to keep its svelte CSR friendly, has some nice state management lib for the CSR, and keep SSR to sveltekit instead of svelte core, just do not sell sveltekit as CSR solution, it is not.

Thread Thread
 
webjose profile image
José Pablo Ramírez Vargas

For state management, use Svelte stores:

// stores/myCounter.js
import { writable } from 'svelte/store';

export myCounter = writeable(0);
Enter fullscreen mode Exit fullscreen mode

Then import anywhere you need the counter.

As for routing, there won't be an official CSR router. Only SvelteKit has routing. If you need routing, you'll find 2 or 3 options to choose from if you surf the WWW.

Collapse
 
webjose profile image
José Pablo Ramírez Vargas

It seems that you believe SvelteKit is the only way to go in Svelte. It is not. SvelteKit is made to be SSR first. Just do regular Vite + Svelte projects with npm create vite@latest.

Collapse
 
rolanday profile image
Roland Ayala

SvelteKit is a game changer. I've used it, love it, and set it aside. I'll use it (or Qwik, or Solid) once component space further develops and stabilizes (a lot of abandoned SvelteKit libs). Time will solve this problem. Aauth.js is still experimental and an aria compliant, complete, proven component UI library is needed. Also, the choice of sfc/templated style like Svelte v. JSX is very much personal pref -- one is not better than the other, and I for one much prefer JSX style. So, yes, if you hate JSX then you're going to love Svelte. I think a lot of people confuse the ease of development that comes with Svelte for overall ease of use and productivity when considering ecosystem (but I agree it IS easier than React considering only framework). Despite what a lot of ppl like to parrot, React eco is much more than just a bunch of vanilla JS libs wrapped for React. For now, I'm still more productive (and therefore have more fun) developing on React. I use Remix, so maybe that's why (agree w/ other comments re: Nextjs and Vercel, which also oversees SvelteKit).

Collapse
 
kedzior_io profile image
Artur Kedzior

a lot of abandoned SvelteKit libs
Interesting, would you be able to share the source?
The reason is that Svelte is still being shaped and some of the libraries are being abandoned because the functionality is added to Svelte or SvelteKit.

Time will solve this problem
Indeed!

Aauth.js is still experimental
Yes that is something devs need to wait for if they really need to use it. It doesn't affect people like me who simply don't use and will never use JavaScript on the server. Authentication then is not a problem.

Svelte v. JSX is very much personal pref
100% agree.

... a lot of people confuse the ease of development that comes with Svelte for overall ease of use and productivity when considering ecosystem ...

But isn't the ease of use of development improving the productivity?

Easier development translates into faster delivery and bug reduced code.

What I also have seen with a lot of developers is that Svelte brings them joy and joy adds up to productivity.

React eco is much more than just a bunch of vanilla JS libs wrapped for React ...

Of course it is. It is years ahead + backed by a big company and it will take time to grow.

However, for myself and I think for some of us the sacrifice of React's ecosystem for the ease of development is the sacrifice we are willing to make.

Collapse
 
rolanday profile image
Roland Ayala

If you're more productive in Svelte then definitely use it -- I would too, but that hasn't been the case for me, despite very much wanting to get off of React. I'll revisit again in a couple years.

Thread Thread
 
kedzior_io profile image
Artur Kedzior

Yes it feels to me like going back to the roots of pure java script with the same powerful features.

Collapse
 
stevetaylor profile image
Steve Taylor

In another words Svelte ruined React for me just as The Expanse ruined every other space science fiction.

This 100%. I now have to take stimulants to cope with using React in my day job. (OK, it’s just caffeine, but I can’t cope without it anymore.) It’s all Svelte’s fault.

Collapse
 
lisen_huang_ed15d1bee4c09 profile image
Lisen Huang

Considering the wide variety ui libraries and modules of react, I will not migrate to svelte

Collapse
 
kedzior_io profile image
Artur Kedzior

That's understandable, it is not a step to make for everyone. Each case is different.
You will have 2 libraries for svelte gantt chart but you will have a gazillion for react.

Collapse
 
starkraving profile image
Mike Ritchie

Do you think you might make a follow-up article where you actually take some React styled and/or stateful components and convert them into Svelte? I’m interested in starting a project using it and I’m looking to try and get up to speed

Collapse
 
kedzior_io profile image
Artur Kedzior

Yeah, will try to post an example this weekend.

Collapse
 
abdulmuminyqn profile image
Abdulmumin yaqeen

I'm mostly a backend person, when I tried react for the first time, it totally broke me, until I found svelte, along with TailwindCSS, I just feel like a frontend king 👑😎!

Collapse
 
kedzior_io profile image
Artur Kedzior

Same as me I've done dotnet and python most of my life and I do like FE a lot, learnt VanillaJs, jQuery, Angular, Vue and finally jumped into React and actually created a SAAS with React that makes money but found it (without offending anyone out there) over-complicating things. Svelte is a near perfection of FE: simplicity + powerful features.

Collapse
 
artazasameen profile image
Artaza Sameen

As long as your intention to build small and personal projects . Sevelte is fine. But, at scale it is better to choose React. Helps in the long run

Collapse
 
webjose profile image
José Pablo Ramírez Vargas • Edited

As I told @kedzior_io, I made the same thing in Svelte and React: A simple timer (countdown). I started with Svelte. Used a readable store to keep track of the time and then calculated the hours, minutes and seconds to present the time formatted. Done.

Let's do React. While it basically needed the same, I of course had to use useState() for everything or the UI doesn't update. Svelte used regular variables for hours, minutes and seconds. Not React. No, sir. useState() everywhere. Anyway, I did 3 useEffect() calls to calculate the whole thing. Done.

Svelte's version: Flawless. I even animated the timer values with fly. React's? Nope. Needs more work. Needs local variables to hold the hours, minutes and seconds calculation, or you need more useEffect() calls because everything is behind one cycle. The result is that 59 seconds is never shown as s59. It shows -1, then 58. There's also an odd behavior: When the React tab is not visible for some minutes, the seconds count is negative! It comes up normal in the next iteration of the number.

Conclusion: Svelte just works. React needs to be made to work. The latter requires more learning effort or more talent than the former.

Collapse
 
kedzior_io profile image
Artur Kedzior • Edited

I manage 3 different teams and I have very interesting observation with regards to that.

So I would say it depends.

On one project I have a team of React developers working on huge Svelte project and the results are great, the team enjoys it and is capable of translating their skills into Svelte. The code base has an amazing simplicity that any newcomer is able to pick it up in no time. There is no component for a specific thing it's so easy to write one.

On another project I have very experienced React team working on React Js and React Native and although it is also going great, but we lived through some serious performance problems and very silly bugs and I think the main issue was the fact that the code is not easy to understand and you can easily loose the track what happens when. Also any bigger package upgrades caused problems while with Svelte we have nearly finished a full blown e-commerce with only 2 dependencies (Tailwind UI and Headless-UI).

My small project is getting a great traction: salarioo.com which I'm hoping it's going to get bigger and feature rich. I will share my experience then!

I encourage you to try if you haven't yet.

Collapse
 
sonyarianto profile image
Sony AK

My journey is little bit different, I stick with Next.js but using Svelte store for state management and that's perfect combination.

Collapse
 
kedzior_io profile image
Artur Kedzior

As long as it solves your problem and makes your productive. 🙌

Collapse
 
fridaycandours profile image
Friday candour • Edited

Take cradova for a spin and find out where simplicity meets speed

Link here

Collapse
 
kedzior_io profile image
Artur Kedzior

Oh nice! Will check this out!

Collapse
 
dipanjan profile image
Dipanjan Ghosal

Most React dev's dream

Collapse
 
wraith profile image
Jake Lundberg

Love this! Welcome to the Svelte team friend!

Collapse
 
kedzior_io profile image
Artur Kedzior

Thank you!
It's the first FE stack that I'm actually enjoying after months of usage and tossing on Tailwind CSS makes it a perfect combo.