DEV Community

Gravy59
Gravy59

Posted on

 

Why I Left React

With good reason, React is one of the most popular front-end JavaScript libraries available. It's battle tested, has a large ecosystem, and contains many features that make creating complicated user interfaces easy. Despite this, React is not a one-size-fits-all solution. For the past month, I've researched alternative frameworks and techniques, explored different paradigms, and finally ditched React.

Background

I'm building a social media application as a side project/"Dream app", and for several months I've had the mentality of doing it all by myself. After switching to a "Don't reinvent the wheel" strategy, I've began to reconsider the technologies I'm using to better meet my new mantra:

  • Performance
  • Rapid Development
  • Cutting (but not bleeding) edge
  • Modern Technology

Dissatisfaction with the Current React Ecosystem

One of the primary reasons I chose to seek for alternatives to React was my growing dissatisfaction with React's current ecosystem. As React has grown in popularity, so has the number of libraries, tools, and frameworks written around it. Unfortunately, React only recently made the switch from classes to functions, and React 18 still has variable support for data fetching, asynchronous actions, and even server components. The DIY me used to think that was fine, because I could just build it myself. However, I'm only mediocre dev. It was also extremely difficult to implement things like nested routing and error boundaries without ballooning my bundle size, if they worked at all.

Slowness of Next.js, Remix Compared to Vite

I don't like CSR for SEO reasons, so naturally I decided to pick up Next.js for its great SSR support. Unfortunately, Next still uses webpack in conjunction with SWC. While I'm sure that Turbopack can be much better, It's not even in a beta stage yet. For now, it takes about 5 seconds to start up the server and another 1-2 for fast reloading. Compared to something like React w/ Vite, Next just feels sluggish. I've felt the same way for other metaframeworks like Remix as well.

React's Overall Performance

Finally, I had reservations about React's general performance. On Vite, after removing any unnecessary files (CSS, images, etc.), the bundle size is 142.93kB (45.89kB gzipped). Svelte is 5.49kB (2.53kB gzipped). That's a 96% (94% gzipped) drop in file size, for a button that increases a number every time you click it!

Exploring Alternative Options

With these issues in mind, I started to look at alternatives to React. I considered Qwik, Vue.js, Astro, and even Ruby on Rails. Each of these solutions had advantages and disadvantages, but I ultimately chose SvelteKit for my own project.

SvelteKit is a framework for building web applications that uses a compiler to generate highly optimized JavaScript code. When it comes to performance and load times, it is substantially faster than React. Also, it offers a satisfying experience similar to Ruby on Rails, which I enjoyed.

SvelteKit is significantly more effective and enjoyable to work with than React, despite having a smaller community and ecosystem. Even if React might be the best solution for many developers, it's crucial to take other options into account that might better meet your requirements.

Conclusion

I love React. It was my first love when I got into web dev. However, SvelteKit is growing. It's paving the the way for new, better web development. In my case, I found SvelteKit to be a great fit for my personal project, and I'm excited to continue exploring what it has to offer.

Top comments (49)

Collapse
 
pronovaso profile image
Petr Novak

For small or hobby project for sure, but for business and large application? I don't think so. React is now on top. Quick, Svelte, etc. are really good but not good for MPA and stuff like I wrote in ⬆️.
In the future may change everythink. Who knows, right.

Collapse
 
m4ty profile image
Maty

Many big companies are switching to Svelte (1Password, Apple, Decathlon..). For MPA there is SvelteKit, which is quite similar to NextJS. The only reason why I would use React for corporate web apps is the fact, it has many libraries and big userbase. Other than that, I personally don’t see any benefits.

Collapse
 
gravy59 profile image
Gravy59

Oh, for sure! React 19 will likely come in guns blazing. I've seen how Vite, esbuild, tanstack for react, and even tRPC + React Query have changed the game in the past few months. But it's also good to see competition as well.

Collapse
 
mergerg profile image
Raphael

with respect, if all business and large applications chose what framework or language to use based on what's currently the most popular, we'd never make progress. many huge companies are switching their backend from python or node.js to Rust because it's safer and faster/more efficient (and therefore also cheaper), so I don't see why on the frontend it'd be a bad idea to use something with better performance than React. React is very popular, but that's no reason to exclusively use it, even for the biggest of applications.

Collapse
 
pronovaso profile image
Petr Novak

Because for large and bussiness application you need quality and stable others libraries.And what we talk with, Svelte world not have much of that. For now, sure.
If make sense for somehow change language like Python -> Rust or any. Why not. Cheaper maybe from your point of view. Almost is not cheaper.If you have developers on Node or Python a and now you must hiring new one or must pay these old dev learning new way. Or rewrite all. All is about the money.
No all is shine and clear.All is about use cases.

Thread Thread
 
mergerg profile image
Raphael

Your response to me saying large businesses can use svelte is that they can't use Rust either? So many are already switching to Rust, so I guess you'd better break that news to all the tech corporations!

Collapse
 
t0nyba11 profile image
Tony B

re: "many huge companies are switching their backend from python or node.js to Rust"

Sources?

Thread Thread
 
mergerg profile image
Raphael

I haven't saved every article I've seen about it but Google is free technologyreview.com/2023/02/14/10... (although this one is about moving from C/C++, but either way they're moving from what was popular to what's actually better) careerkarma.com/blog/companies-tha... (note Facebook/Meta moved from Python to Rust, are they a big enough company to be evidence that this happens?)

Thread Thread
 
t0nyba11 profile image
Tony B

So, one then, not many, and even then not really switching so much as using Rust as well as their millions of lines of Python, C++, JS, etc.?

Thread Thread
 
mergerg profile image
Raphael

I'm going to stop replying now because if what you took from that is "Meta is the only company that has started using Rust," you must be determined to read anything wrong.

Thread Thread
 
t0nyba11 profile image
Tony B

LOL ... no, I was genuinely interested in your sources for saying "many huge companies are switching to Rust" ... I can't find that information anywhere.

Thread Thread
 
gravy59 profile image
Gravy59

From the top of my head I know Vercel, which was valued at $2.5 billion as of June 2021, is switching all of their systems to rust (Next.js, Turborepo, Turbopack, etc)

Thread Thread
 
t0nyba11 profile image
Tony B

So, a better description would have been, a couple of companies are maybe moving to using more Rust, but it is still only about as popular on GutHub as Scala, and barely a statistical blip compared to Python, JavaScript, and Java. Got it. :)

Collapse
 
vulcanwm profile image
Medea

First time I’m seeing a post that isn’t all about how React is the best.
Now I’m confused because I’ve just started learning Next.js and React after coming from Flask

Collapse
 
gravy59 profile image
Gravy59

Quick note: React isn't terrible or evil. I just didn't like it for my edge cases and realized I could whine about it here to get hearts lmao

Collapse
 
vulcanwm profile image
Medea

ah okay, thanks

Collapse
 
amissah17 profile image
Otabil Amissah

I feel you, this kinda making me rethink a lot of stuffs

Collapse
 
koteisboss profile image
koteisboss

So it's OK, good luck guys with longterm support and find job using one of no-name / unpopular framework.

Try to explain to business: I used this unpopular framework in order to save 50 kb and now we can't quickly find new devs to grow. Sounds 'cool'

Collapse
 
mergerg profile image
Raphael

or it could be phrased "I decided on what was best for my project rather than what was the most popular, I now know how to use both the popular framework and the lighter one that I chose (because OP didn't have to erase all knowledge of React to switch to another framework), I actually did my research, and I think outside of the box and prioritize the success and efficiency of the product over jumping on a bandwagon." not all businesses and prospective employers are against innovation, many actually prefer it. and if you can convince a capitalist you can save them money without making their product worse, you'll probably be on their good side.

Collapse
 
gilfewster profile image
Gil Fewster

I will always look favourably on developers who make conscious, reasoned decisions about the most appropriate toolset for their projects; developers who can demonstrate that their skills are not limited to a specific, single framework or library and are instead capable of reasoning about architectural concerns and learning to adapt and work with new systems.

A JavaScript developer who is unable to learn and adapt to an existing codebase simply because it isn’t written in React is not a developer I want on my team.

Thread Thread
 
koteisboss profile image
koteisboss

it depends, almost I agreed and no mean that 'use react only', oh no %)

 
gravy59 profile image
Gravy59

Not trying to argue w/ you here but if It's terrible, why do companies like Netflix, Facebook, Cloudflare, Pinterest, Twitch, Hulu, and Auth0 use it for their websites?

Thread Thread
 
peerreynders profile image
peerreynders • Edited

Some food for thought:

… and I tried to convince people that you should write the business logic in C and use my templating system, … Nobody agreed with me. Everybody just wanted to write their business logic in the templating system and it was very discouraging to me for years … Eventually I had to sort of give in and say, OK, fine, yes, …

Rasmus Lerdorf: PHP in 2018

Thread Thread
 
gravy59 profile image
Gravy59

The main thing holding me back from PHP or Rails is the learning curve and the amount of time I'd have to spend migrating away from JS.

Collapse
 
rolanday profile image
Roland Ayala

I've been prototyping the same app in parallel in SvelteKit, SolidStart, and QwikCity and and am going with QwikCity. No question, when it comes to DX, speed of development, SvelteKit wins hands-down winner IMO -- virtually no boilerplate. It's also post v1.0 and dev team is churning out updates a fast pace. SolidStart is prob my favorite, because I prefer it's composible state model and unidirectional flow over SvelteKit, where SK runs a little too loose for my liking (albeit, makes it super approachable to the novice developers and great for quick and dirty side projects). I've landed on Qwik City -- not because of the resumability (vs hydration), which is it's headline feature, but because also uses fine grained signals similar to Solid, the loader/action pattern very much appeals to me (by far, my favorite of the bunch), and, even though in beta, I've run into less issues w/it than the other frameworks, including v1.x SvelteKit. QC also most active of the bunch of look at Github insights, which tells me dev team is very hungry to move QC forward.

Collapse
 
davidfree2 profile image
Humberto David Esquerra

Okay first of all: You have an awesome username and profile image

Second of all: svelte is fantastic I've been using it for about a year and half now. It's great I really like it :)

Collapse
 
y2k4life profile image
Guy

I'm curious when making these framework evaluations is ASP.NET Blazor ever a consideration (WASM or SS)? Or is Blazor in a whole different category because the language is C# and the platform is .NET? Maybe it is Microsoft? Something else maybe?

Collapse
 
gravy59 profile image
Gravy59

That's interesting to think about! I mostly work with JS right now.

Collapse
 
gersondias profile image
Gerson Dias

If the 100kb of the react button sample is too much, guess having to download the .net core using wasm will not be good. Also the blazor server can became a nightmare to deploy and scale properly (due the signals dependency)

Collapse
 
y2k4life profile image
Guy

At what point does SS become a nightmare when scaling? I've had no issues deploying SS nor scaling, but that might be because of the scale I'm currently at. I would be concerned if SS does not scale, I'm just curious what kind of workload derogates scaling. I'm guessing signal you mean SignalR?

Thread Thread
 
gersondias profile image
Gerson Dias

yes, SignalR and other websocket solutions are hard to scale because you need to comunicate with the same server always (maybe though cookie affinity?) or have a shared memory cache layer (Redis) to share the data among the servers. Nightmare maybe is to strong word to use, but it's not that simple as "copy the files to a CDN and you a good to go" or like "just make this container available in the internet"

Collapse
 
dowscz profile image
Marek Schwarz

Hello, I tried to build a blazor social network. It was just unusable. Very long loading time in blazor wasm and lags and outages in blazor server. I am NET lover, but I dont think it would be better in near future. I recommend js, ts for frontend.

Collapse
 
stradivario profile image
Kristiqn Tachev • Edited

It sounds to me that you may want to try my abstraction based on Lit Html and web components.

github.com/rxdi/starter-client-sid...

I was feeling the same as you before 4 years when i quit Angular as my primary framework and decided to seek for alternatives.

I didnt find anything that suits me so i decided to use only rendering engines and to build my own framework.

The abstraction goes even further so i decided to create rhtml it stands for Reactive html.

github.com/r-html/rhtml

I will try to write some more information later.

Cheers for the transition i don't regret at all choosing to build my own framework.

I can now build scalable websites pretty faster and with beautiful code.

You can also explore the UI kit that i have build

github.com/rxdi/ui-kit

Cheers mate great work for writing this topic

Collapse
 
joelbonetr profile image
JoelBonetR πŸ₯‡ • Edited

At the end it doesn't matter, you don't need to do that. Let me elaborate:

You got in love with React, probably because you got the things done, you felt useful and the curve start to go brrr!

Now you get bored of it (probably without getting to understand all nuances of it though), so you want something new, took a decision and then, proceed to convince yourself why should you do that (moving from something somewhat known to something brand new).

Does React have performance issues by default? The objective answer is no.

Is Next JS "sluggish?" does it really take 1-2 seconds on a fast reload? Sure not. I know that because I'm working full-time w. a team of 6 on a Next JS webApp since more than a year ago and it keeps being blazing fast even having multiple integrations with third parties and sometimes huge presentation logic paths.

React only recently made the switch from classes to functions

Yeah... sometimes I believe it was yesterday too πŸ₯Ή the older I get the faster the time passes by, isn't it? React hooks came around February 2019 though πŸ˜…

Coming back to the first sentence, it doesn't matter, it's fine, you don't need to justify why you want to test new things!

You can check out SolidJS as well, try Astro on your own but maybe...

The DIY me used to think that was fine, because I could just build it myself. However, I'm only mediocre dev. It was also extremely difficult to implement things like nested routing and error boundaries without ballooning my bundle size, if they worked at all.

Maybe you found your reasons and maybe you didn't need a library (like React or Preact).

You can jump to Angular, which huge API will cover your needs abstracting you from the DIY most of the time. You can even check Analog to get more features without moving an inch outside of this ecosystem.

Or maybe not, because at the end, it doesn't matter... pick the tool that's best for the job. You'll be able to deliver a similar product with most of this tools.

I'll stick with Next JS as long as possible, because it covers all the needs I have, but I know that eventually I may need to move on, just like we did with other tools in the way (like JQuery or backbone) and I don't care. If I need to lead a project on Svelte kit I'll learn it, if I need to do so with Angular I'll refresh my knowledge of it and so on and so forth.

Which is the best of all? "The best" as concept isn't something atemporal, the best is the one that covers your needs today. When it does not you just code things on your own and eventually move to something else that does πŸ˜„

Collapse
 
virtualmachine profile image
ByteCodeProcessor

The most difficult thing is moving to something else. As engineers we want to build a hut today and get ready to build a skyscraper tomorrow. But you need the right foundation and that foundation is hard to choose in the moment.

Collapse
 
intermundos profile image
intermundos

Congratulations on making the right move. React is terrible, terrible and once again terrible piece of software.

But when making the switch, you need, first of all to understand what are you building.

Building an SPA? Go with solid.js pure or Vue. Even though I love solid, Vue js offers single file component which are truly something that makes development a breeze.

Building a site requiring SEO and other websites necessities? Go with Astro. Astro offers everything sveltekit offers, plus you can mix every framework inside, including svelte or solid. Use nanostores for state management.

I did a boilerplate with Astro and now manage multiple websites from one repo using netlify.

Collapse
 
mkvillalobos profile image
Manrike Villalobos BΓ‘ez

Absolutely agree!! In fact, I go with Astro and island architecture!!

Collapse
 
jwp profile image
John Peters

I too have been looking into other things. I feel Svelte is promising but I also like WASM.

To top it off I've been taking deep dives into Chrome Extensions using Manifest V3. Almost unlimited ability with petal to the metal direct chrome interfaces.

React to me is too opinionated but overall has a great architecture. It's popularity will make it king for a long time barring any native JS or TS SDKs overtaking it. (Not likely)

 
peerreynders profile image
peerreynders • Edited

The last time I looked at Svelte, Sapper was still a thing.

Gen 3 on the other hand relies on a more β€œWhat can be on the server will be done on the server, what has to be done on the client will be done on the client” approach.

Both SolidStart and TanStack Start enable the Gen 3 philosophy and are based purely on JS (TS).

But if SvelteKit works for you…


I think the point was that building web apps with PHP sucked

  • PHP was a product shaped by community demands
  • PHP was for the longest time the most popular rendering technology on the web
    • in spite of the fact that "technically better" alternatives existed at the time
      • i.e. popularity isn't a measure of excellence
Thread Thread
 
joelbonetr profile image
JoelBonetR πŸ₯‡ • Edited

@jfbrennan

React took us full circle, not forward. Seemed like progress because the hype bois at Facebook had large marketing budgets. There is zero chance React et al would have survived without the Facebook name acting as a reality distortion field.

This is a blatant lack of history context.
We did server-side render things as the only thing that existed, React was a first of its kind back in 2013 and allowed a richer experience for the users, it hadn't competitors at the same level since a year later (Vue appeared) and even then it was a nice choice most of the time (mainly because Vue abstracts you from actual JS and that means more things to learn and because when weighting pros and cons between those two... well, let's say that Vue couldn't be considered "the best" in the panorama at any point of its existence as far as I can remember).

The truth is that you couldn't get the same "reactive" user experience by SSR-ing with PHP, nor Ruby nor Java nor.... ATM, we didn't even had separate teams for backend/frontend back then! (at least in the companies I worked).

Node appeared in 2009 and the ecosystem grew but hadn't a big enough ecosystem to cover all enterprise-grade needs at that time. JS, as a language also was in need to evolve in several key points.

And it did! Everything evolved naturally. Community, organisms, companies... pushing to provide what we have "now" (since 2016?) as full JS frameworks to SSR "reactive" frontends.

I had been coding with multiple languages (depending on the project) like C++, Java, PHP, ASP Classic (we called it ASP back then), C#, JavaScript... Nowadays there are few reasons to choose anything that's not JS/TS for my personal projects and each day it passes companies look at the JS ecosystem in a similar manner. It has some drawbacks (as everything in this life) but the weight of pros is huge.

@peerreynders completely agree with you on the PHP thingy... I always have a bitter flavour around the support on it from the PHP Group in my memories, though. Do you use PHP regularly? is it keeping up with features and so?

Best regards

Collapse
 
leob profile image
leob • Edited

Great article and I wholly agree, but sometimes it's just a matter of "ecosystem" and "community" that pushes you to React ...

At the moment I've chosen React for a project because it's just the most pragmatic option - I'm using the Ionic framework for my UI, and that officially supports Angular, React or Vue - so where does that leave me:

  • I don't know Angular and have no interest in learning it

  • I do know Vue, but my knowledge is rusty and community support for the Ionic/Vue integration seems minimal

  • the Ionic/React integration is reasonably mature (the most mature one apart from the Angular integration), well documented, and well supported (community)

React was therefore the most pragmatic choice, especially if you don't want to constantly "DIY" and live on the bleeding edge (for speed and ease of development I just want to be able to copy/paste snippets of code to get me started in a number of scenarios, rather than have to debug through heaps of code to find solutions).

Yes, someone even integrated Ionic with Svelte (dev.to/mandrasch/svelte-meets-ioni...) and I saw that even SolidJS should be doable, because Ionic is built on Web Components, but the problem is routing.

Anyway it just goes to show that React is ahead largely because of "inertia" - market share, ecosystem, community and so on, not because it's inherently technically better.

Collapse
 
corners2wall profile image
Corners to wall

Omg bundle size, really? When everywhere uses 10mb on desktop, or 4g (5g) on mobile. In my opinion, it's really funny argument. Btw u can use cache or others technique for store your bundle on client side.
Above about bundle not technology.
If u want really fast app u can use assembler or bytecode, for example :))

 
joelbonetr profile image
JoelBonetR πŸ₯‡ • Edited

If you pick the context of the text, it's First of it's kind meaning that separate what we did before from a "new era" of reactive SPAs provided on a somewhat small library (not framework) that allowed people to integrate it with mostly anything on a seamless way, easy to pick and fast to work with (in comparison with alternatives).

Angular JS (a framework) was there some time before but we can all agree that it was... Let's say not good enough to put it softly.

The rest on that huge list but maybe 1 or 2 exceptions were not competing with react on providing the same features, appreciate the effort to mention them all, tho.

Collapse
 
tythos profile image
Brian Kirkpatrick

React for me has never been worth the abstraction buy-in, as is the case with so many frameworks. But it's worth teasing apart the specific requirements you have. Vite, for example, is more of a replacement for webpack, browserify, etc., than a front-end interface. The big question is, how do you get closest to agnostic pick-and-chose UI elements? For a long time React was the sort-of-best way to get close with leveraging standalone component, but it was always supported more in spirit than in practice. The complexity of integration and transpiling on the fly was never really worth it.