I hate React (...shhh don't tell anyone)

[@WebDevCody]

React is still a great library with a strong community. I’m just voicing some of the small things i find pretty annoying and confusing when using React. What things annoy you about React?

[@DanteMishima]

BrowserRouter Page routing... I see no reason why i still have to do that

[@kokodev3719]

I am annoyed by the slowness and RAM hog of React. I hate how you can just do it all in JS in a much simpler way. Why even have this library. Ugh.

[@vampiping]

thats what people say coming from vue.

[@jeimagu]

I enjoy doing everything in vanilla Javascript but then svelte came and I actually learned it and it was so good, then I decided to do the same thing I made on svelte but on react and it was painful, react makes things so complicated compared to svelte

[@PanosPitsi]

It’s just some functions that return stuff your browser shows people act like react is rust

[@baka_baca]

useEffect is one of my biggest complaints about React too. I actually rewrote a React project I started in Svelte because I was trying to get something running fast and I thought I was wasting too much time fighting with useEffect and useState. One of the major time wasters was constantly checking if I created yet another infinite loop with useEffect. Considering I'm using external services with daily quota limits in this project, one small misstep in updating my useEffect could have quickly killed off my quota and slowed me down even further. For comparison, I probably spent as much time worrying about just this 1 useEffect hook as it took me to learn Svelte from zero. I appreciate React, but I'm probably going to keep reaching for Svelte in the future when I just need to get a project done.

[@WebDevCody]

Haha yeah I’ve done a few infinite loops before. React makes it too easy to do by accident, especially if you use a linter which tries to force you to always add the dependencies array even when doing an onMount hook. Simplicity is beautiful when it comes to peogramming

[@ShivaShadowsong]

I looked up a few courses because I was under the impression that React is the most popular out of all the front end frameworks, and got into it. Took a while to get a hang of it, and as you said, learned to do most of the things using their documentation that pushed the class-component approach, and like 3 days after that, React came out with the hooks update and began its gradual shift away from class based components, so my initial knowledge turned next to useless if I wanted to keep up. Then I had to relearn things using a mix of their official docs and third party guides because their docs are, at times, unintuitive to follow, and the hooks update docs had some expectation that you were already familiar with all-things-React to fully understand it. Very overwhelming and hard to grasp beginner experience all in all. Could never really wrap my head around why the verbosity and complexity of these seemingly basic things (onMount, state management...) was necessary, I felt like it was a downgrade when they introduced these changes and new standards. Reading their documents, it feels like they're switching stances throughout this project's lifespan constantly, like they don't know what they wanna achieve with it, and clearly don't know the most optimal way to do it either. It tries to both provide liberty of development, but at the same time, wants to be opinionated about it, so which is it? Having to pass around callbacks for whatever you wanna do, use unintuitive imposed method names, try to learn and upgrade on third party codes which are difficult to read even though some of them are explicitly written in the most compact way possible in JS, due to, what I can only describe as - a desperate attempt from these developers to compact the code visually to the point where their components don't look monstrous (lengthwise). I mean, minimized arrow funcs, reducers for days, maps of maps, ternaries within ternaries, all packed into these weird components that half of the time barely look like human written code anymore. Someone pointed out I should check Redux for state management, and at that point I was looking at another 1.5 HOUR video on how to work with Redux. Finished a project in React and went looking for an alternative in hopes that the front-end framework landscape can not be this convoluted, there had to be a better way. Voila, every other framework I tried was an improvement upon improvement (Angular, Vue2 (now 3), Svelte). In my limited and terrible experience with React, it's an over-engineered and convoluted pot of spaghetti produced by none other than Facebook, a company whose flagship app which is a glorified dashboard/news feed, has shitter practical performance than having multiple Adobe projects opened simultaneously with dozens of resources loaded. I am atm using Svelte and loving it, I rewrote that entire project in Svelte in 3 days and now it reads better and performs better too. Good riddance✌

[@beenmicrophone5817]

I enjoyed reading this as much as u did writing it 🤣❤️

[@WebDevCody]

Haha I love your input! I’m glad you started using svelte. It’s a lot better for sure!

[@ShivaShadowsong]

@@beenmicrophone5817 Yea I'm certain an entertaining level of frustration can be detected in my rant but I needed to get it off my chest, it is what it is. 🥺

[@damilare1982]

Dude You had beef with react ?

[@LWolf94]

I've recently started learning React and honestly I don't like it. It could be that I'm just used to vanilla JS too much and still am a noob-noob with React, but somehow I just feel it's over complicating things that used to be simple.

[@eddyk564]

I agree! Vanilla JS is so simple

[@davidledesma3908]

I like React, but that's maybe because I tried to learn Angular first, and comparing them, Angular is way more complicated

[@DiestroCorleone]

React is an acquired test. The downside, you might start forgetting how to write vanilla JS once you get too used to hooks.

[@jswarrior_]

​@@DiestroCorleone 100% agree.I've been working with it for 5 months,and i feel like i have literally no idea how could i do my projects without react XD

[@DiestroCorleone]

@@jswarrior_ Pin this comment, people. It will happen to you.

[@DutchThought]

Another great video. I’ve used React for a project but nothing can take me away from Angular.

[@outrageousKilla]

Angular is the best by far

[@ts8960]

@@outrageousKilla lol angular is absolutely trash

[@outrageousKilla]

@@ts8960 irrelevant opinion

[@ts8960]

@@outrageousKilla u know whats irrelevant nowadays? Angular

[@driden1987]

Angular gets a lot of hate, but is provides tools for creating very good application architectures

[@lorandhorvath4466]

Been working with Vue 2 for a few years and loved every minute of it. I've recently tried React and oh boy, what a mess it can be, comparatively speaking. It's just.... no thanks, to put it simply. I'm not sure why everybody has been bashing jQuery for the spaghetti code it can lead to... because React is like spaghetti squared.

[@chukwuemekaajima8373]

You need to try vue3 and you will never look back.

[@greekapostle4548]

Angular 10+ beter than react or vue3

[@jon1867]

before I realized how powerful hooks were I liked vue2 more than react. But vue3 feels even more chaotic than the react ecosystem to me, it's like Vue realized they needed hooks and created another framework inside of a framework.

[@samuelmorkbednarzkepler]

​@@jon1867 react went through the exact same process when they switched from class based components to hooks though. Vue realized they needed to expose their underlying reactivity to let you compose more self contained logic. That's the real reason they did it. You can argue the ecosystem had a bit of a bumpy ride getting to Vue 3 but honestly that was mostly the fault of the ecosystem itself, many of whom decided to rewrite everything to hooks right off the bat instead of just smoothly moving to Vue 3 and then incrementally change things to hooks. But all that is over now, nuxt 3 and vuetify 3 are both out finally and the ecosystem is coming together. Imo, the Vue 3 composition api is way more clean than react in almost every conceivable way. From the fact that vues fine grained reactivity doesn't cause a bunch of sideffects like react does when it rerenders it's entire component on every change, while Vue just updates the value itself. The Vue hooks are super flexible, because they are just signals like solid has. They work everywhere. They can be conditional, unlike react. They can be put outside component lifecycle unlike react. Vue 3 hooks are so flexible you can even use them outside Vue. Someone made a package called reactivue thats literally just importing Vue hooks into react. Vue 3 composability also allowed for vueuse to exist. Which is a fantastic consolidation in the ecosystem. I think the ecosystem under Vue 3 is much better than before and I think people who wish Vue 2 had stayed the same are tripping on some acid

[@shawnlee6775]

Nah mate I like the Svelte HTML syntax way more than JSX. Other than that you are 100 % right.

[@Joshuahendrix]

Lol I consider myself a state management specialist of react. I’m building some pretty complex stuff but if you don’t know how to work around immutability it’s definitely much harder than Vanilla JS. I love it but it’s not for everybody. I like the over engineering and confusion because it feeds my ego forsure when people think I’m smart 😂🤣 I’m really not, just been with React for a while. Svelte looks way more intuitive

[@royceschmidt5263]

State management is a pain in the ass especially for new developers I've seen a lot people quit just because of it and I don't blame them

[@chelinemagsano6185]

How long did it take you to be really confident with it?

[@thomascollardeau9569]

I loved React coming from Angular, but now I'm allergic to it. I use Svelte as much as I can.

[@dogfoxx]

Beginner React Developer here. I started developing about 3 years ago using svelte. Coming from that and being forced to use React... it's been a nightmare for me. Svelte is so much more fun to use. I'm trying to introduce svelte to our team, and they seem open to it. But I'm the only one that knows about it. Their first reaction was "what is svelte???".

[@WebDevCody]

I agree, svelte makes logical sense, react is a mess of strange complexity sometimes

[@yopp1234]

You know what annoys the heck out of me? The fact that I'm missing out on potential better frameworks just because React is the most popular in my local job market (I've almost never seen a job asking for a vue/angular specialist). Being a developer should mean that I can create anything, anytime, but sadly there are constraints like these that take away the fun of it.

[@theseangle]

@@yopp1234 yeah honestly React should be deprecated by this point. I hope they make an announcement saying that they are closing React ;D Cruel, but that really does bottleneck jobless developers

[@alshuwaiee27]

Which is the best react course ?

[@Ayush_Bob]

When i work with react I feel so stupid Either react was not created for the purpose we are using it, or the framework was created shortsightedly The documentation part was so true, I went through like 2-3 vids for anything in react whereas while working Angular the documentation was great compared to react, I didn't feel like referring to any tutorials while working with angular Not saying that angular is any better but it is more structured [no half as*ed implementations], React is just stupid State management is just a hell [And don't even get me started with libraries/external dependencies]

[@i3looi2]

I disagree with JSX , coming from HTML/JS decades ago, into Vue, I cannot agree JSX is better than Vue Templates or Svelte. For god sake, 2022, and JSX is still a pain in the ass to use with FOR and IF. For 90% of usage components are light and the JSX is small and easy to follow, but for the remaining 10% with very specific pages and UX logic/flow, I cannot believe the rage it creates in me trying to make a 200 lines JSX. The fact that Vue offers the v-if , v-for directives RIGHT on the html element , cuts 2 un-needed lines of codes everytime; plus the control over the iteration feels better. I also got interest in Svelte, but lack of community / help makes me reluctant to shift YET my big projects. Nuxt3 (Vue3) framework is insanely good and focused on what HTML/JS is.

[@dannydevs]

Yeah, Svelte and Solid both have a couple of years before the ecosystem/community reaches a place where people are comfortable doing professional/production work, other than brave and fearless early adopters :)

[@rumahmilky4517]

> JSX is still a pain in the ass to use with FOR and IF. This. for is easier to read than .map(). .map() should be only used for one liner

[@qbwu7779]

I like the vscode theme! How to get it?

[@Andrimont]

I started with react about 5-6 month ago and state management was a pain to wrap my head around… all these rules and hooks that you should use where very confusing at first but make sense after knowing why they even exist. But I love this framework for one sole reason and that is why I am even sticking with it for some time for now, it is of the community that react has. There are a ton of libraries and packages built for react that make react development less “painful” and far more enjoyable. For example I have a 3D application that I am developing and I wanted to use ThreeJs to make all that 3D part more easy. And I was blown away that react three fiber exists. It just made my life easier than ever…. Even state management tools like redux, react-query and Jotai are a life saver…

[@WebDevCody]

Yes I agree. The community is too big for any other framework to really pick up traction. Some of the big brain developers are all adding to the react ecosystem daily, so I doubt we’ll see any major shift in the industry for a while

[@theseangle]

If not for React other frameworks would have larger community. Vue, for example, while having a relatively big community, is still like 6 times less popular. This is F-ed up because it's second in popularity falling behind only to React. Kinda a monopoly lol. But Vue still has lots of tools. Like TroisJS for ThreeJS

[@pasizdobrekuce]

Wait until you come to the point of updating dependencies.

[@DoctorMandible]

I tried using react for just the menu ui in several games. Projects always ground to a halt due to the complexity of managing state inside a react app.

[@shapelessed]

A state management framework that doesn't manage state properly and only slows down development over vanilla JavaScript. Anybody willingly using it and suggesting it to build the next application with should either be fired or get free mental care from their company.

[@samuelmorkbednarzkepler]

I'm a Vue fanatic ever since Vue 3. The most underrated framework upgrade imo. The jump to Vue 3 was a fucking incredible piece of work. Modern script setup components are like a piece of art.

[@brokula1312]

I switched from React to Vue3 and it really is a lot simpler. The only thing I really regret is that React has great TS integration, while Vue3 can be quite weird with props casting and untyped slots...style wise, Svelte is very similar to Vue3, but I haven't yet tried it with TS.

[@WebDevCody]

The key is to not use typescript 😅

[@dannydevs]

Interesting. I know Vue 3 was rewritten in TS, but there are still problems? If so, I do think they'll probably work on it. I do know there are some problems with TS and the macros (defineProps, emits) and they are working on it...

[@ylioo]

in Angular changing state (push element to array or change string value for an example) requires less code then in svelte, react and It has OnInit, OnDestroy. How the f was react an improvement. Pls stop fallowing the angular hate train for no reason.

[@jdavis2581]

Good summary! I’ve been trying to choose a front end framework and this was helpful. It’s 10 months later now… do you still feel the same way?

[@XeonProductions]

I got through a bunch of React tutorials and built a sample website about 2 years ago, and immediately didn't like it's syntax or how it was structured. I also learned Angular, which I liked much better.

[@naranyala_dev]

when we learn vanilla js, what are the most useless or cannot be maximized writing javascript using react way?

[@WebDevCody]

not sure I get the question, but react, vue, svelte all abstract away the need to update the dom manually which is very useful. They all just have different approaches to that abstraction and managing component state which is where some are a lot simpler than others in my opnion.

[@spheenik]

And it's not only that the svelte code is easier to reason about, it's also much faster!

[@shapelessed]

Svelte: - Faster to learn - Faster to work with - Easier to work with - Runs faster Excuse me, but what else do people want from a framework...?

[@yarrichar]

Just tried out svelte properly recently. Blown away by it after many years doing react. I know this video is a year old now, but hope you do more svelte content going forward

[@returncode0000]

You’re absolutly right, React is freakin ugly. I just need to learn it … very hard if you don‘t know the over engineered concepts. I like your videos, hope to see more eye opening stuff from you in the future because you‘re so talented explaining complicated things. Even if this is a anti-react video it helped me to understand some more react internal concepts, great content 👍🏻

[@quintencabo]

Why do you NEED to learn it?

[@returncode0000]

@@quintencabo because of my job. fullstack dev in an enterprise environment.

[@jou3883]

everybody in the world who wants to get into frontend web development HAS to learn React, not because it's useful but because the mainstream masses use it and also its a prerequisite to get a job these days🙄. Im getting the hang of React at work but it's not something I'd like to master.. I know and believe in my heart of hearts there must be a better, an easier library for frontend. I have yet to try Svelte. Wish I had time to do side projects and learn Svelte

[@alyzidan2089]

it takes guts to say that out loud . respect

[@bertrodgers2420]

We have a pretty huge UI that we rewrote recently from backboneJS to react. Even after working on our react app for over a year, I often find myself missing the simplicity of our old UI as it was 90% vanilla JS/jQuery...

[@devrusso]

Even though Svelte code is definitely much more simpler and elegant than React, there's no way anyone seriously thinks vanilla JS is better than React...

[@bertrodgers2420]

@@devrusso depends what you're doing, like I say, I often find myself missing vanilla

[@devrusso]

@@bertrodgers2420 just the fact of going back and forth between html and js then doing const thing = selectdocumentbyid Is enough to make react vastly superior. I'm not an old school developer, just started js 2 years ago and i learnt vanilla for like 1 month after moving on to react and it was a breath of fresh air to use JSX. There's no discussion react is clearly superior to vanilla. Idk about jQuery

[@bertrodgers2420]

@@devrusso mate, I never said vanilla is better than react, I said I sometimes miss the simplicity. I'm a senior so have used many tech stacks and I'm a big fan of react as I use it daily, but like I said, some things are simpler in vanilla.

[@devrusso]

@@bertrodgers2420 some things definitely simpler in vanilla. useState is a pain as the guy said in the video... Who knows why they decided to go with this

[@jediampm]

Hi, agree with you in all things except JSX. To use JSX you need a build tool ( or only babel) , you need to watch out on class -> className, etc. The direct alternative to react like preact and solidJS solved this problem, still i dont like and with fn components with state even worst. You have an alternative template engine to work with react, HTM, but no one talk about it ( only preact but majority of their examples are with jsx ) Their alternative / migration / evolution from class base to hooks is bad, like you mention why they didnt implemented more specific hooks for life-cycle of the component (like vue did), why is not supported to write in async syntax. And they made the evolution because of the keyword this, but WTF, they still dont simplified they way passed params to an event handler, still need a arrow fn ( this is still valid also to svelte where Angular and vue you dont need to worry about it). Even that react is backed by facebook, their docs sucks and they already release two version since hooks was release ( i think) and they didnt create or release new docs website, which shows something about this framework and the company behind it. Vue, svelte and solidJS have the best docs and are updated, Angular docs could be better, at least are update and Angular make a release each 6 month (which can be more difficult or more work to update the docs). And 1 thing all react dev forget, react dont manage your styles, it is not part of the lib, it is up to the bundler ( which majority of the time is webpack that deal with importing css file). And think that react is not the better solution when you are working with someone like UI designer that only knows html and css ( this is also valid for preact and solidJS) where Angular, vue and svelte are better in this case. About svelte, i dont like their template engine, because makes me remember emberJS, event that svelte template engine is much better than emberJS, still do not like, i prefer the Angular and Vue way of template engine. When working with forms ( simple or complex, with or without validation), for me only one framework make sense: Angular ( 2+). My advice: try solidJS if you like JSX template engine, and make a video what you think about it, And Popular not always means good or practical.;) Thanks

[@gehdochnicht]

Why do you only recommend Angular when working with forms?

[@jediampm]

@@gehdochnicht i dd not mention the word or words "only recommend", in other words what i said that Angular make my life easy when working with forms, you have two possible ways to do it and it comes with validation built-in, which is and should be a must in any framework. Besides, you dont need an external package to work with forms. The same for routing, it is buit-in. With others frameworks like vue and svelte are better to work with forms compared to jsx based frameworks like react and solidjs. But for Validation you always will need a external package to make your more productive. I think even with full framework like nextjs or nuxt or sveltekit dont bring easy to validate data. So, Angular is a complete framework, with routing, form handling and form validation, http client, all built-in. And of course with typescript since is known as Angular ( v2 +). With Angular you make web apps, with the others you make websites. ;)

[@oumardicko5593]

finally some that gets it. I tried to learn react but i've been overwhelmed by all the unnecessary stuff react has, choosing between functional or class based components, built-in hooks to it, re-rendering optimization. I went back to vue + jsx and don't want to go back

[@youarethecssformyhtml]

The optimization thing is what killed React for me lol. besides that, so many hooks with weird names that have many gotchas.

[@mattwebbertime]

Respect the vent! Might be a dumb question, but regarding your gripe @ 5:14, isn't the implied reasoning for implementing array destructuring just a simple / clean way that the useState hook allows you to declare your own named variables for the state and state setter returned by the hook? Like as opposed to object destructuring where you'd need to reference the actual name and then rename it with a colon. You have a deeper understanding of this stuff than me so maybe I'm missing the code smell... Keep it up!

[@WebDevCody]

It’s all just a personal preference, but I’d rather have seen something like const { value: count, set: setCount} = useState(0) because it’s apparent what the useState function returns and how you could potentially use it. Another example, const counter = useState(0), which you can then do counter.set(5) or counter.value. It’s more verbose, but it’s not as obtuse compared to an array of two ordered elements. What if I don’t care about the value of the state and just want the setter? Then I either need to do const setCount = useState(0)[1] which is hacky, or do const [count, setCount] which means I have a count variable I’ll never use sitting around in my code because I can easily destruct the 1st index.

[@mattwebbertime]

@@WebDevCody Ah ok gotcha -- yeah I can see why that might be preferred now. Thanks! And I had to look this up bc JS has so many cool little tricks that I forget about, but in regards to getting just the setter, you could also just pass a comma with no variable declared to only instantiate the second item like const [, setCount] = useState() ... TIL

[@WebDevCody]

@@mattwebbertime right, but the empty comma is hacky imo.

[@mattwebbertime]

@@WebDevCody Agreed 100%

[@ShivamMishra-mn6cs]

In the beginning you mentioned a state management solution what use that?

[@WebDevCody]

We use something called cerebral.js, but it doesn’t really have any maintainer at this point

[@djecak1789]

i'm so happy i decided to use vue 3. little bit magic in templates and that's it.

[@masiafmasiaf2204]

i agreed with what you said, im so comfortable writing in react and know how the useState, useEffect behaviour will work out, but tottaly forget when i started to learn react was a little painfull, one thing is when i teach other ppl, is to change your mindset from vanilla js or other higher language is think of immutability, when using the state hook, that way of thinkg help me a lot. right know learning rust and the same concecpt, well almost, btw svelte look way more cleaner and like you i dont like the templating sintax like angular or svelte that you point out is those framwork somehow adopt jsx, i will learn those framework no doubt, right now i will stick to react cause of jsx been one of the reason haha.

[@shapelessed]

I maybe understood a single word.

[@AGSTRANGERTunisianAuthor]

It's a bit ironic that you basically described the class functions componentDidMount and componentWillUnmount. The reason I haven't transitioned yet to functional components is because how confusing hooks are in functional components whereas class components are actually very straightforward and intuitive.

[@WebDevCody]

yeah, maybe my complaints are not with react, but functional components. they just seem a little hacky

[@natenorrish]

React is basically a project that started off in an object oriented fashion, which received negativity, so they converted to function components, and now they are tacking on hacks such as useState, useEffect, etc., to provide everything that the classes could provide.

[@FastLegs]

It really feels like they just keep adding hacks on top another instead of fixing any underlying problems..

[@ofmouseandman1316]

I've been using vue for a long time... the concepts are kind of the same but I realy like the mutable aspect of it (it's basicly a proxy on top of variables to update the doms). I'd like 2 thing more which are more syntaxic: - Separation of concern; In react, it is "just JS bro" ... but not everything is JS (html is not and css neither) - Speaking of the latter: CSS management... In react there is no CSS management. Option A you do that crap called Css in JS (which is an abobination IMO) or use an abstract like tailwind.... in svelte and vue you get "scoped css" which basicly prevent all the problems you can get with class management

[@WebDevCody]

Yeah css in react is a mess. 9 different ways to achieve styles. Might as well just use sass with BEM

[@mimoduocss]

Oh my the salt when describing onMount wooo you're so spicy I like it! I really like svelte's function names too and yea not so much the template syntax. Same can be said for CSS preprocessors! They get abused so badly it doesn't even look like CSS :x Thanks for the video!

[@WebDevCody]

Haha potato chip salt level!

[@i3looi2]

I do see react as made by someone trying to make web-development in C. For me React does the job, but it has no soul. It does not represent what webdevelopment stands for and is. It does not inherit from the legacy HTML/JS have created themselves alone. I see many many new users learning React, before actually learning vanilla HTML/JS/CSS. I really don't think you can be in we development and not be able to make a page in strictly html/css/js to fully understand what web is. I`m currently forced to shift from Vu3 to React on a project, but on top of that use ReduxSaga and a custom in-office React framework. It sucks the joy of webdeveloping out of me. Whereas learning Vue was a joy and fast process. On top of that, I see my new colleagues bred on React how little to no knowledge of basic JS they have, or HTML logic. (we don';t even get to talk about CSS .. oh no). The enviroment is so robotic and result-driven. Projects literally have no soul, no meaning.

[@WebDevCody]

I hear redux and redux saga is a mess. Redux was the biggest over engineering library for a simple concept of sharing state. Vue is fun to use for sure. I enjoyed it on a side project, but it also has some strange things I dislike. Svelte seems the cleanest.

[@i3looi2]

@@WebDevCody Redux is an elegant solution for complicated async/http logic (which 90% of websites don't have). And an overkill for simple async/http logic. Redux/Saga is literally the only place where you ever gonna use generator functions in web-development in your career. And as elegant and funky they are, it's a complete mess to actually use proficiently. I agree Svelte is the cleanest and true to HTML/JS, however for me, is not mature yet and the stackoverflow community not yet at comfortable levels to be able to solve any issue quickly. I was gonna jump to SvelteKit in the next year or so, but then Nuxt3 (Vue3 Framework) was launched recently and pulled me back. That thing is a fantastic tool for medium to big projects.

[@dannydevs]

I really love Vue 3 with the script setup syntax, which, ironically, looks a lot like the composability of React (minus all the terrible DX of React!). I've learned that React has stuck to its decision to make React pure and functional (immutability), in terms of reactivity. And it's just not working, and the ramifications are a ton of pain points for devs. Yet they refuse (and how could they not? it's a core architectural decision--to change would mean to make massive breaking changes to everything). The thing that upsets me is how they are not upfront about this, and are riding the massive popularity of React to force the React community to endure the pain. Stockholm syndrome is a real thing. Thankfully we have Vue, Svelte, and Solid to save devs' day :).

[@dannydevs]

Oh I forgot the whole library vs framework thing, which brings tons more pain points to React devs. React devs, let me just say this: spend 1 hour, nay, 30 minutes with the Pinia docs (Vue's state management, 1st party solution) and contrast it with Redux, or Zustand, or whatever the heck you want, and let me know your thoughts. Orders of magnitude difference in terms of simplicity, with apparently equal power.

[@theretroman3862]

I am with you 1000% man! I just got hired as React dev, for the first time and I told them I do not know React. After a few weeks I told to my self, fk this shit! I am going back to my Vue projects and forget I ever attempted to do React...

[@hansschenker]

the name 'useEffect' should hint that here you deal with side effect (which is generally async stuff like rest api, animation, setTimeout, ...)

[@rumahmilky4517]

not helpful at all. use effect? im not using any effect. im invoking sideeffect on component mount or everytime dependencies change.

[@davidatebisun]

I tried Vue, React and Angular. Any day I will still choose angular. For now angular don't give me unnecessary headache like React and I am pretty sure if I join a company using angular today, I might not need to learn any additional thing like the way react has too much packages to do one single thing.

[@leejohnson7484]

I'm currently behind on my react assignments on a crash course I'm doing. It's absolutely terrible. I feel like it's making me forget the JS that I already knew. It's clearly on the course because of the hype behind it.

[@TheGamingTraktor]

Rn im in that same situation. Certain things I did with Javascript (ecmascript) are so much more complicated in react. And in the tutorials I found the solution is not even the actual solution but some whack workaround that brings other problems. And the course presented react like "we arent working with any framework we are working with REACT!!!"

[@leejohnson7484]

@@TheGamingTraktor Yeah. Eventually I started to get the hang of it. Stick with it and you'll succeed. Even some of the tutors said it took a long time to understand it. Got a job now and don't even use React anyway 🤣

[@naughtiousmaximus7853]

​@@leejohnson7484 what do you use lmao?

[@chukwuemekaajima8373]

I literally left react and focused more on backend development when reach moved from classes to hooks. I really detested hooks, why would they bring bring out an entirely new paradigm just to write frontend code. Classes had very nice and intuitive lifecycle methods, e.g componentDidMount, componentDidUpdate, componentWillReceieveProps, render etc. These life cycle methods made life so easy to code UIs. I would have preferred the React team spent more time polishing up the class based paradigm rather than develop the hell called hooks. I am happy I wasn't the only one who feels hooks are just too bulky and unnecessarily verbose. Hooks force you to follow their strict pattern without giving the developer much room to be flexible. Thanks for the video, a lot of React army needs to see this.

[@trinimac2026]

There was JSX for servers back in the day. It was called php, but it was horrible so people used templating libraries instead. Then React came and reset the clock.

[@kamil7280]

OMG you're so right!

[@HeyDan1983]

I agree with everything you said execpt for the JSX part, I think that if you're describing your interface, the less javascript you see there the better, I can see svelte HTML and in immediately know whats going on even with the if and each tags, I think it is even clearner than seeing a var.forEach with html inside. But again, just my opinion.

[@dannydevs]

To argue for the other side, JSX makes the template pure data, and you can use the full power of JS in it. Templating is wonderful for its simplicity, but it cannot be as powerful as JSX/pure JS. But templates can serve, I don't know, 90+% of needs.

[@HeyDan1983]

@@dannydevs Rigth I think that's an advantage, but then again, its kind of what Im trying to avoid, with templating you need to move all of that logic to your logic/script and once your data is ready to be display you just send it to the template. If you add more logic to your HTML/JSX it makes it harder to read what youre trying to describe. At the end I think it just comes down to preferences.

[@dannydevs]

@@HeyDan1983 Personally I like the templating approach better (Vue, Svelte); I agree that keeping the logic out of the template is a nice principle (less messy, easier to read, etc.). Interestingly, Evan You (creator of Vue) said that JSX is much more difficult to parse/optimize because it is 'unlimited', whereas parsing a template is much easier because it is much less complex. He was able to make Vue 3 much faster by optimizing DOM diffing via the template. However I was quite interested to run into the limitation of templates in Vue (coming from React it was surprising for me)...but then, I just moved that logic into the script tags. Pros and cons...

[@CodingAbroad]

Even something as basic as proper naming conventions seems silly to me. As a newbie useEffect means nothing to me. I've been using Angular since 2016 and I love it so much more. I'm only learning React under duress because there are more jobs for it... I'm now the front end tech lead at a new job and I can now make the decision as to what we use for our new cms. Very tempted to go for Angular :) I don't get why React devs love making *everything* a component. You're only going to get into "prop hell" later. My last job I nearly laughed in the tech lead's face when he had to send a prop down 5 levels! Angular has a lot less emphasis on componentising everything.

[@WebDevCody]

Angular makes me cringe more than React, but I’m glad you enjoy it. Angular uses events that bubble up the tree from child components right? Don’t you still need to use prop drilling? I remember using rxjs with ngrx and it was awful. Over engineering at its finest

[@CodingAbroad]

@@WebDevCody sounds like you were unfortunately involved in a mis-managed project. People usually use either ngrx or rxjs - not both together. Under the hood ngrx *is* rxjs anyway. I’ve never used ngrx as you rightly say it’s over engineered. Yes Angular has its equivalent of props called “inputs”. But most angular devs are only going down 1 level so very easy to manage. It also has the reverse of that “outputs” but again easy to implement and keep track of ☺️

[@stuvius]

Converted my project from React to Svelte and it was the best decision of my life. State management was so cumbersome and had lots of issues with outdated state, and Svelte solved it all

[@richardhunter132]

your idea of useUnmount() function wouldn't work because the idea of the cleanup function that is returned by useEffect is that it runs not just when the component is unmounted but also whenever any of the hook's dependent properties change

[@soixantelly]

Vue Composition API blows react out of the water, react have a leaky abstractions, everything in react is half assed & nonstandard and since react is not really a web framework, and need the react DOM to do anything useful in the web, this shit is even harder to fix and i don't agree that JSX is better, JSX is non standard, and i'm willing to bet that standard HTML will still be around long after JSX is gone

[@shubitoxX]

0:38 react is kind of ... ? Didn't get that accoustically

[@WebDevCody]

Convoluted

[@shubitoxX]

@@WebDevCody Thanks! :)

[@kaylemaclou]

React has convoluted its once-simple approach, specifically that of pure functional components. This is due to its insistence on pursuing a functional programming paradigm instead of the traditional object-orientated. Functional programming has its merits, but it should not be at the expense of simplicity. Nowadays, there is a significant cognitive input required to write even a simple industry standard UI component in React, which is expouned with you include things like useMemo and useCallback. As a possible solution, maybe the React docs should start with a brief overview of functional programming and explain the reasons underlying why it was used as an basis for React. This ought to help new developers understand notions such as pure functions and side effects, and consequently why the need for hooks such as useState and useEffect.

[@pjc825]

Svelte/SvelteKit for the win 💯👍

[@browaruspierogus2182]

browsers should ditch JS and go full ahead with WebAssembly to use different languages

[@danielchettiar5670]

You'd break the web lmao. That's the first rule of the web. Keep backwards compatibility as much as possible

[@Barnardrab]

I started studying react, but found it to be cryptic, so I stuck with vanilla JavaScript/Typescript instead.

[@WebDevCody]

It’s very cryptic from my experience, or can be if no good patterns are followed. People like to hype it up likes it’s amazing, but I disagree

[@pmioduszewski]

7:19 lol, I don't consider React as a framework

[@WebDevCody]

Does react call your code or do you call react code? When something calls your code it’s a framework

[@jxmked]

You can use Typescript and RequireJS to have a modular like thing.... Its feels like using React App but more simpler than React. Also Add some SASS to make it as a package. I did this already and its awesome.

[@fischi9129]

About jsx... I think every time you use jsx and you have 20+ lines of code and you find yourself with a mix of xml and js syntax, it's painfull to read. You will eventually get used to, but I don't like using a JS library/framework and needing to get used to a werid confusing syntax that is not xml and not JS (same issue I didn't use svelte till yet. I really love the statemanegement in svelte, so if I switch away from vue3 I probably would go to svelte)

[@WebDevCody]

I do find a svelte templates easier to read the more I read jsx.

[@fischi9129]

@@WebDevCody I mean, I think they are pretty similar, but I don't like adding extensive syntax in brackets in the mid of xml, I'm not really used to it. Ofc you can get used to it, but the only fact that I have to get used to ut kind of bithers me ^^ I just prefere separation and directives over all 😅

[@WebDevCody]

@@fischi9129 yeah I really dislike adding attributes to dom elements such as v-for to render collections. But it’s all just preference. It’s the main reason I dislike vue and angular

[@fischi9129]

@@WebDevCody I mean, I can understand why, somethimes they add up like crazy and get a pain to work with, I guess the best option at the end of the day is still the HTMLElement.appendChild() in a for loop xD

[@brandonlange2260]

I have built a couple production apps now in React and I can respect how far it has come. Especially with the addition of Next Js I expect to see React grab a bigger percentage of the market. I am still a huge Vue fan boy (love svelte too) but in the end of the day these frameworks aren't maintained by big corporates and therefore companies are starting to shift away from them. Hopefully we see a better competitor in the near future.

[@dannydevs]

Not being maintained by big corporates is actually an advantage for Vue, IMO. Vue continues to grow and grow in popularity, not only in Europe and Asia and South America, but also in North America. They have no problems with funding, AFAIK, and Vue 3 is primed to take over React. I've heard from devs that React was unresponsive to their requests because it did not line up with Facebook's goals, so actually being beholden to FB can be a big negative. FB is wedded to their pure functional approach, but that approach has led (and apparently will continue to lead) to bloated size and sub-par performance. Vue 3, Svelte, and Solid will kill React, eventually. And beta docs for hooks, 3 years after the release of React hooks? The terrible DX stories can go on, and on, and on... but React and its bizarre choices, and their dark marketing tactics, are what make React...React. This is (not quite) literally what a React core member said. We are who we are, we're doubling down on it, we're happy with what we're doing, even if it makes your lives miserable. Good luck, React.

[@dannydevs]

Oops forgot to mention: there is no problem with Vue's funding. Or Svelte, now that Rich Harris is with Vercel, or Solid, now that Ryan Carniato is with Netlify. React will die in the next 2-3-4 years, mark my words. They just don't care about you.

[@shapelessed]

"frameworks aren't maintained by big corporates" 1. Wrong. Read some more about Svelte. 2. So are millions of NPM packages, and yet we haven't shifted from them? 3. Nobody I know cares about "who maintains the framework", but how easy it is to learn and how fast it allows us to build apps with. You can learn Svelte in the same time you'd write a tiny React component for production.

[@punsmith]

React is the worst thing to happen to WebDevelopment and yet somehow people go full denial and convinced themselves that React.js' methodology makes sense; It doesn't. Not even experienced devs can agree on best practices. Even within the documentation, you see the devs themselves stating how many components become a hot mess of nested components and series of props to handle states. What strong community? You mean the snobbish, elitist "JSX is just Javascript, but actually, is its own markup language that is a hard lock-in and will never transfer to anything in the future; not to forget we belittled PHP for mixing the view and logic just years before" Dan Abramov worshippers? Speaking of Dan, holy f*ck. He might be an amazing coder, but REDUX is a war crime endorsed by thousands. And for those that are angrily typing right now, ready to defend their baby with the lines "But there are SO many libraries for it!" Many, indeed! And especially many abandoned ones. "B-B-But, we can even use react to build native smartphone apps, because we hate learning anything that isn't javascript." Indeed, you can. But should you? Probably not.

[@WebDevCody]

Haha yeah I hear you on some of those points. I personally like jsx better than anything else I’ve seen (angular, vue, svelte templates) because it is closer to JavaScript honestly. Logic will always be nested in the view, and it’s up to us to work hard at keeping complex logic out of components of possible and wrapped behind computed state or functions external to the component. Yeah Redux is a PoS. Immutability brings more complexity than necessary in most situations. I personally love svelte and vue. It’s a lot easier to understand, mainly due to state being a simple mutable JavaScript variable. Also they have intuitive lifecycle method names.

[@HeyDan1983]

I think that React popularity as to do more with people just following what they hear in the comunity more than been the perfect framework. Also people dont realize that they picked a profession that is base on been learning new things, if that wasnt the case we will still using jquery, so theres a lot of FE devs that are in their comfort zone with their React knowledge and they dont want to learn new things... And I know this because Ive been their, I have mote than 15 years of dev experience and I know sometimes is dificult to be learning new things, but then again, we picked a profession base on that.

[@AndreiDumy]

React is nowhere near the perfect framework but the 'worst thing to happen to WebDevelopment'? Like, cmon

[@jon1867]

IDK I still think react slaps. useEffect for all it's quirks is a revolutionary concept, it allowed us to build incredibly powerful abstractions that are changing the game completely. Libraries like useQuery and frameworks like Remix wouldn't be able to exist without hooks. Vue3 took notes from react on this after realizing how powerful it is. The thing react is missing is a "This is the way you are supposed to do this" but that kind of makes sense because react IS NOT A FRAMEWORK ITS A LIBRARY.

[@bluebassboy22]

I'm a new web developer who learned React through a coding bootcamp and after a few months I am finally justified of my dislike for it .

[@arrowheadgaming5008]

I totally get you i was forced into a big complex react project that im basically doing alone right now without having a web background i have more of an destkop gui background with languages like c++, c#, java and so on... And i was just thinking all the time why the fuck do i need to use this extreme overhead all the time and it still runs me into bugs at some point. I could pickup javascript quite easily but having react force me to not use it is so frustrating and annoying. I worked with frameworks like qt for example where u have completely reactive data on the ui without the need of any stupid overhead. Svelte also looks so much cleaner if i wouldnt need to use react because of my job i would instantly drop this shit tbh. I dont know why its so popular and even if people tell me hey you are a noob i just think why do i even have to understand all this bullshit if its definetly smarter to have a framework that does the same thing more elegant and clean i just dont want to become a react expert because its annoying and in my opinion the worst ui library of all time compared to the other things i saw. Even plain php is better than this because you can just do what you want to do instead of melting your mind with useless overhead 😂

[@devrusso]

After seeing the Svelte code you really sold it to me, though the actual HTML/JSX part was enough for me not to want to try it. React is simple once you get the hang of it, though having to check Google for simple stuff (e.g how to set state on an object property like you did on video) does get tiresome. Also, you lost the biggest point: using react with typescript when you're passing down props is HELL. If you pass down a setter gotta do like react.dispatch or when passing down children since react 18 react.node and others, which is just not readable and makes no sense until you read it with very much attention. I just trust the people who made it had a good reason to make variables immutable... useEffect is fine, though we could have something like useEffect(() => {...}, [unmount]) since the whole "returning a function inside an useeffect to clean up" is confusing once you have a lot of useeffects.

[@ACSWebLlangollen]

I am moving to Svelte purely because React is a pain when rerendering on state changes. Infact my experience in React has mostly been trying to find work arounds for things it cannot do instead of just getting the actual job done. React has only got as far as it hs due to other libraries.

[@noturbeezwaxbeaulac1383]

I really tried to use Reac-native. The problem is not the API or the language, its the tooling. Watchman is a pain, installing a package and break the project and so on. I spent more time fixing the project I was programming. At this point I just gave up and gone back to Native dev. Maybe if one day React-native as an actual IDE with a real package and dependency manager, maybe then ya its going to have value over native dev.

[@WebDevCody]

Yeah I know nothing about react native, but I could see the benefits of you have a small team and need to build the identical app for all types of devices. But yeah usually using the native tooling and languages built specifically for creating apps on the device might be easier to work with instead of these other, dare I say, “hack jobs” our industry makes just to try and “save” us time

[@wforbes87]

Totally agree with most of this. I've been on vue projects at work for 3 years now, teaching myself react this year for fun. A lot of the time... it's not that fun lol.

[@anthonykariuki5153]

Interesting, Ease of debugging should be a feature in these frameworks

[@danielchettiar5670]

Wait, isn't the main reason that immutability exists in React is that afaik is that React compares the memory location of the previous state and current state of a variable to decide if it has updated? Like, is we try this, [0,1] === [0,1], it's false, cause, duh, thanks Javascript. JS doesn't do deep compares ie compare the inner elements, it just compares the memory location, (because as the object grows, map or array, deep compares get more expensive). How can you prove this? Try this now, const arr = [0,1], const arr2 = arr & then arr === arr2. It'll be true. Cause arr2 just points to the memory location of arr. If you changed elements in either of them, it would reflect in the other React internally relies on native JS comparison ===. It doesn't do a deep compare for performance reasons, it does a memory location compare. Which is why you need to do quirky stuff like destructing the previousState into the one that'll become the next. This is convoluted as hell tbh

[@WebDevCody]

the more I think about code, the more confused I get lol

[@danielchettiar5670]

@@WebDevCody It's just JS in general lol I think.

[@EngineBoy]

But i love React. i have never written any project in vanilla but i followed maximillion for the react and he revised javascript and thats what i put in myself to go forward and learn react. and i love it for real. the things you mention is no more barrier to understand.

[@ivandabovic8329]

React is most unpleasant and frustrating piece of crap. I started enjoying programming once again when I started working more with Vue.

[@kklowd]

Good video. I felt the same during the vue2 to vue3 release. Vue is much newer than react relatively speaking. There's less documentation and community around it. I felt a lot of similar things as you did with react. I actually had a lot of bugs that were seemingly impossible to fix in vue2 because some things were not intuitive. It wasn't as I expected it to work, but it works fine in vue3. I used to be envious of react. Everyone is using it, there's so much more information and support on it because of the popularity. Fast forward to today, Vue 3 documentation is looking amazing. They've become more opinionated with composition api. They've adopted vite and pinia. Things are looking a lot better than react tbh. Also are you single? 😏

[@WebDevCody]

Lol, no I have a wife. I love the docs with vue and svelte. Very easy for a beginner to read through and understand. I’m not sure I like where vue3 went with composition api. I feel they are just trying to reinvent react, but I haven’t used it enough to have a solid opinion. They basically split their community imo. Went from an intuitive approach with the vue objects to basically an approach that makes it feel like react

[@theseangle]

@@WebDevCody if you ever have to go to Vue in some project, absolutely use Composition API (with directive). It seems that it's less intuitive, but once you learn like 3 basic functions, it becomes so much easier to maintain and upgrade the code. Logic is not split into many places of Options API. You don't have to scroll over thousands lines of your code every half a minute when debugging/implementing a feature.

[@coldym]

Even though I like react, I agree with most of the stuff you've mentioned. Especially, documentation is written on class based tutorials, docs etc while functional components being on use nowadays. Also, as you said, to create simple component logic you have to write bunch of the code with its asynchronous state updates, effects which makes it complex to maintain. Sometimes I think react team tried to invent bicycle but failed with it...

[@WebDevCody]

I think the react team JavaScript skills are too advanced so they created something way too advanced for the normal everyday web developer.

[@beenmicrophone5817]

@@WebDevCody the doc situation was a huge setback/hurdle whilst learning for me. One thing I don't understand is the immutable aspect, I understand immutability is great for a blockhain ledger, but the whole point of an application is to make alterations to state. I really can't get my head around this... Like, is it immutable or not 🤷

[@faridguzman91]

React is like the ADHD and Gemini sign of web development, dont have one standard, always changing its mind. For beginners its quite exciting, but gets old and annoying after a while

[@蒙哥的濃縮思維]

Been working with many frameworks for the past 7 years, and I always try my best to avoid using React unless it is absolutely necessary. Everything about React is overengineered, and the docs are not helpful. Vue 2 has given me a much better experience overall (though Vue 3 starts to get confusing...)

[@stefanusayudha1853]

i think the developer try to keep the semantic simple, as close as possible to the theory behind the programming it self.. because if we put too many new semantic in a language, this world will surely chaos.. it is in some case make it better and simpler.. but it also open for new unkown problem possibility.. imagine if everyone give their own method and everyone contribute to hundred possibility of problem.. i didn't meant to underestimate this proof you have given.. but, i think that is how the language business work..

[@driden1987]

Haha, I used React back when everything was classes. I liked it. Had to get back to it recently and now everything is hooks and many different third party libraries so I had to relearn everything like it was new. My UIs are pretty simple, I’m not a FE dev so having to dive into the ecosystem so hard was tiresome and not rewarding. I understand the value of immutability (I’m an FP proponent) but this is totally not the way.

[@driden1987]

One more thing. The reason I like your channel and not the other UI channels is because you are pretty down to earth, not doing the whole hype driven development which some other KZbinrs try to push down our throats for some reason.

[@jwenaposse305]

💯💯💯💯💯💯 Q: if you like the way svelte does everything logically, but you don't like the syntax... Did you ever try VUE?!

[@WebDevCody]

yeah, I don't like vue's template syntax either. JSX still makes the most sense to me.

[@jwenaposse305]

@@WebDevCody fair enough. I recently had to start learning react for work, and I experience the same frustrations you mentioned here. For me vue2 has super logical component methods and one agreed way to do css, so I really love it. I still have to learn vue3 and also will try out Svelte! (never tried angular, but I think I will pass)

[@kokodev3719]

I really appreciate this video and I completely agree. I’ve been working with React for over a year and it is such a slow RAM hog, not to mention Expensive. Just working with React really affects your JavaScript expertise. And you still have to do all of the styling. I just cannot see the reason for this @library.

[@kaushalchrollo]

The more tool I have in my packet the more I can work with.

[@janvierma]

As a dev we ought to be adaptable, but when it comes to React, I am of the opinion that it is so insanely convoluted it feels absurd!

[@Imsofreshx]

If the linter knows useEffect has a missing dependency, why doesn't React? All this just makes no sense, and React is also slow. Svelte and Solid are light years ahead, even Vue.

[@stavrosthalassinos5716]

Don't want to be a fanboy there, but as I was a React fanboy, I can say that after trying Svelte, I never went back.

[@breezycodes]

Nuxt all the way!! I tried react three times.. Managed to build 3 full proper applications but it was way too much work. I could create all 3 projects in half the time with Nuxt🤷🏽‍♂️

[@pasizdobrekuce]

I approve. That said, why JSX? There's HTML. 🤷‍♂

[@adimaralimuddin96]

i hated react but i have to force my self to learn and use it. react is just popular, but not the best. if i have to build my own personal project, i would go with solidjs or svelte.

[@d2vin]

next js is the saving grace of react

[@kaushalchrollo]

Make a dynamic reusable component in other language

[@deathlife2414]

If you want it to be immutable just make it const

[@rumahmilky4517]

const arr = [1,2] arr.push(3) still mutable it is not about immutability. but referential equality. react needs a new array to check if the array if changed. svelte too. see 15:30 he wrote names = [...names, 'bob'] because svelte doesn't track deep inside the array. if svelte is deeply reactive it can track .push().

[@FruFre]

Magic of Svelte > Religion of React

[@naranyala_dev]

Good arguments and very good opinions

[@Furryfluff100]

React is a Library not a framework.

[@WebDevCody]

If the tooling calls your code, it’s a framework. React knows when to call your components, it’s a framework

[@shapelessed]

React - a tool that's supposed to help you build apps that are more "reactive". If you have to outsource the reactivity to a standalone library - that means the framework is fundamentally flawed and doesn't serve its only purpose. It needs to be either deprecated or replaced by something better, such as Vue or Svelte. - Also, JSX is NOT the best way to write components.

[@fyfoh]

I think the over engineering of react and the use of flavor-of-the-month libraries is due to smart people being bored. There's no reason to make this stuff so complex.

[@farhanghazali4406]

just use then-catch rather than async. Btw, i agree react sux ass.

[@eddyk564]

I dislike React too. Every time I attempt to make something meaningful in it I run into stupid problems that (IMO) shouldn't be problems such as having to use useEffect to move elements around, or having to do work arounds to change a component's properties from outside the component. It just seems so much more work than Vanilla JS and I can't help feeling like ...... why bother?

[@eddyk564]

I also hate how useEffect runs when something changes. It would be sooo much easier if it kept running until a condition is met

[@Balawi28]

Totally agree!

[@kaushalchrollo]

I love all programming languages

[@meka4996]

React is just an older framework for people who do not want to improve. Shorter code is almost always better because it is easier to write and debug.

[@philidornews4055]

Svelte is the way.

[@zoro9878]

Angular ftw!!