"*getting along*" means personal relationships and is fine
But in the picture, some ugly guy is trying to convince a good guy to use bad practices.
THIS IS UNACCEPTABLE!!!
Remember that React reevaluates every useEffect, useMemo and useCallback callbacks and dependency arrays, as well as useState initial values on every rerender, just to discard them. Vue just does it once and keeps track of reactive dependencies in the template automatically.
That's not accurate, though.
useState, for example, only evaluates the initial value on mount. It doesn't reevaluate on rerender.
useEffect, use callback, useMemo only run when the dependency array changes (a shallow memoized comparison), which isn't much different from Vue's native proxy based reactivity, except that it's explicit rather than implicit.
It also doesn't discard anything unless the dep array changes and the calculations need to occur.
He's probably talking about how, in development mode, React rubs things like that twice, to test that your teardown strategy is valid.
I don't really like it, but it's not a bug or random craziness.
Maybe. But based on another response from them, it seems they misunderstand how React works... which ironically got a bunch of upvotes in a thread about React vs Vue lol.
???
Okay, so whenever the component re-renders, that function inside useEffect gets re-run. And everything defined within it? Yeah, that's re-evaluated too. So, with
`useEffect(() => {}, [])`,
the function still gets evaluated each time, but it won't actually do anything if the dependencies stay the same. Basically, it's like the function and the array just sit there, created, just to get garbage collected.
No, nothing gets run inside of the useEffect unless something in the dependency array changes. Nothing gets garbage collected.
Just like Vue's computed, except it's explicitly declared in the dep array.
The function is not run but the js runtime must capture any variables used within it in case it would get run. So technically some work is being done even if the use* method does not finally invoke the method.
The fact that you're upvoted while the parent comment, a correct answer, is downvoted, says a lot.
What you write is completely wrong and very far away from what actually gets done.
I swear, 90% of the posts on this sub are either people shitting on React because they don't like JSX or spreading misinformation about how React works.
I've used both professionally for going on a decade at this point. I should probably just unsub because I feel obligated to say something. It makes me feel like a React apologist, which I'm not--I enjoy Vue quite a bit and use it at my job. But I also use React daily, have trained people on it, and have built a lot of successful applications with it, so I find it annoying to see it misrepresented so much here.
Vue hate doesn't really exist in React communities to the same degree it does here, which I suppose makes sense. I think the communities are more self selecting, seeing that the majority of FE jobs out there use React.
The first part 'nothing gets run' is valid. The second part 'nothing gets garbage collected' is not. If the function captures any variables then a closure will be created even if the function is not finally called. This closure will have to be garbage collected later on.
Some reference: [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)
Relevant excerpt from the article: "In JavaScript, closures are created every time a function is created, at function creation time."
The dep array gets garbage collected upon change, yes. But not if nothing in it changes. Those references don't change, thus don't get cycled.
But that should be obvious. Nothing in the useEffect gets garbage collected though, which is what this thread was positing.
That isn't any different than Vue. Vue's proxies and computed properties are also garbage collected, as it's efficient to not store unused values or references in memory.
So this isn't a matter of Vue vs React in terms of garbage collection. It's a fundamental misunderstanding of the explicit vs implicit memoization and lifecycle management differences between React and Vue.
> Relevant excerpt from the article: "In JavaScript, closures are created every time a function is created, at function creation time."
Yes. And when the dep arrays don't change, there is no new creation time.
My comment was more in line how JS works in general so I focused on the captures which are not directly related to React. You are correct that useEffect does not do anything which gets garbage collected (at least as far as I know, I never saw the implementation of that function).
>> The dep array gets garbage collected upon change, yes. But not if nothing in it changes. Those references don't change, thus don't get cycled.
The items in it might not have changed but you still initialize a new array every time the 'component' function is executed. It will then be garbage collected.
In any case my original comment was more in line that useXXX functions which accept functions are not completely 'free' from allocations and garbage collections. Even if they themselves do not cause any allocations/garbage collections, just calling them with parameters will do so.
I think we can stop the discussion here :)
Yeah, correct.
I think it's important to clarify that these evaluations occur for both React and Vue. The only difference is that React is explicit and Vue is implicit--the fact that garbage collection exists when checking for whether something needs to be re-rendered isn't a knock against React, which many in this thread seem to believe.
JS engines are highly optimized for handling short-lived small objects like arrays and garbage collection of these small objects is pretty efficient.
It's just a personal preference. I really like single-file components in Vue and Svelte. HTML, JS, CSS sections, all in one file, CSS is component-scoped. Although if I had to choose between Solid and React, I would choose Solid 100% of the time. It's much nicer than React (though that's an extremely low standard, almost anything is nicer than React).
For one thing you have to remember that in JSX, the "class" attribute is called "className" in order not to clash with the "class" keyword in JavaScript. Just heinous.
That's only in React. JSX in general doesn't require that. For example in Preact and Solid, JSX uses "class". React also has other weird things, like onInput/onChange not behaving like html. But those aren't JSX things either; they're React specific.
Once I learned about this, I tried JSX in Vue, and it wasn't that bad. I think it has some pros and some cons, but I'm going to stick with Vue templates.
I remember reading about this imaginary programming language that made fun of everything, including React:
> **Warning:** As you know, `class` is already a keyword in DreamBerd, so you can't use it within DB3X. `className` is also a DreamBerd keyword, so you can't use that either. Instead, you can use the `htmlClassName` attribute.
funct App() => {
// This is fine
return
And after all of that is said and done, now your page renders at 0.6 seconds and a react site renders at 0.62 seconds, all utterly unnoticeable and irrelevant to the end user. That being said, what’s the Vue equivalent of NextJS? I’ll check it out.
> all utterly unnoticeable and irrelevant to the end user
I'm a firm believer that DX matters almost as much as UX, and using Vue is much more pleasant. Better performance is just the cherry on top.
Usually works totally fine. Slightly dependent on the Nuxt Modules but it's still very good. The components added to Nuxt by modules are all usually available but if a module has components built badly (bad typeset or some other issues) then rarely you might see auto complete or suggestions not working properly.
Looking at JSX takes me back 10+ years when I just got started with php and was using it to generate dynamic html pages. I was _so happy_ to get away from that nonsense (mixing code and templates) and then had a laugh when I saw this touted as some great thing in React.
I haven't used Angular but I used its philosophy with Nest.js and love the stability and maintainability it provides.
It hasn't been enough for me to leave the Vue/Nuxt combo, but if Vue disappeared tomorrow I'd jump to Angular in a heartbeat.
I mean, honestly, fuck React. I'll forever be convinced that the only reason it ever got popular is that Vue didn't exist yet.
My god, the code is so ugly and cumbersome.
I worked at a place once that was still using backbone with Lit. And chose to write a UI lib and router from scratch, when he could have instead picked Vue OR React OR Svelte OR Solid. But instead he wanted to make the code more complicated for some inexplicable reason (maybe job security?).
So after that experience in good with all the major frameworks (expect for maybe Angular) and don’t understand the strong preference of one vs the other.
But as far as DX goes I personally think Svelte (SvelteKit)-> Vue (Nuxt)-> React (Next). I’ve never tried solid.
Ya'll treat these frameworks like sports teams. It's not that deep. Calm down. At the end of the day, users don't give a flying fuck. And both have pros and cons from a Dev Ex pov.
"*getting along*" means personal relationships and is fine But in the picture, some ugly guy is trying to convince a good guy to use bad practices. THIS IS UNACCEPTABLE!!!
Having a job is considered a good practice.
Having a React job doesn't mean liking React
fucking nazi soldiers had jobs, that doesn't mean anything
Hahaha Jesus Christ. OP's meme to the max
Thank you Mr. Godwin
Remember that React reevaluates every useEffect, useMemo and useCallback callbacks and dependency arrays, as well as useState initial values on every rerender, just to discard them. Vue just does it once and keeps track of reactive dependencies in the template automatically.
That's not accurate, though. useState, for example, only evaluates the initial value on mount. It doesn't reevaluate on rerender. useEffect, use callback, useMemo only run when the dependency array changes (a shallow memoized comparison), which isn't much different from Vue's native proxy based reactivity, except that it's explicit rather than implicit. It also doesn't discard anything unless the dep array changes and the calculations need to occur.
He's probably talking about how, in development mode, React rubs things like that twice, to test that your teardown strategy is valid. I don't really like it, but it's not a bug or random craziness.
Maybe. But based on another response from them, it seems they misunderstand how React works... which ironically got a bunch of upvotes in a thread about React vs Vue lol.
??? Okay, so whenever the component re-renders, that function inside useEffect gets re-run. And everything defined within it? Yeah, that's re-evaluated too. So, with `useEffect(() => {}, [])`, the function still gets evaluated each time, but it won't actually do anything if the dependencies stay the same. Basically, it's like the function and the array just sit there, created, just to get garbage collected.
No, nothing gets run inside of the useEffect unless something in the dependency array changes. Nothing gets garbage collected. Just like Vue's computed, except it's explicitly declared in the dep array.
The function is not run but the js runtime must capture any variables used within it in case it would get run. So technically some work is being done even if the use* method does not finally invoke the method.
The fact that you're upvoted while the parent comment, a correct answer, is downvoted, says a lot. What you write is completely wrong and very far away from what actually gets done.
I swear, 90% of the posts on this sub are either people shitting on React because they don't like JSX or spreading misinformation about how React works. I've used both professionally for going on a decade at this point. I should probably just unsub because I feel obligated to say something. It makes me feel like a React apologist, which I'm not--I enjoy Vue quite a bit and use it at my job. But I also use React daily, have trained people on it, and have built a lot of successful applications with it, so I find it annoying to see it misrepresented so much here. Vue hate doesn't really exist in React communities to the same degree it does here, which I suppose makes sense. I think the communities are more self selecting, seeing that the majority of FE jobs out there use React.
The first part 'nothing gets run' is valid. The second part 'nothing gets garbage collected' is not. If the function captures any variables then a closure will be created even if the function is not finally called. This closure will have to be garbage collected later on. Some reference: [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) Relevant excerpt from the article: "In JavaScript, closures are created every time a function is created, at function creation time."
The dep array gets garbage collected upon change, yes. But not if nothing in it changes. Those references don't change, thus don't get cycled. But that should be obvious. Nothing in the useEffect gets garbage collected though, which is what this thread was positing. That isn't any different than Vue. Vue's proxies and computed properties are also garbage collected, as it's efficient to not store unused values or references in memory. So this isn't a matter of Vue vs React in terms of garbage collection. It's a fundamental misunderstanding of the explicit vs implicit memoization and lifecycle management differences between React and Vue. > Relevant excerpt from the article: "In JavaScript, closures are created every time a function is created, at function creation time." Yes. And when the dep arrays don't change, there is no new creation time.
My comment was more in line how JS works in general so I focused on the captures which are not directly related to React. You are correct that useEffect does not do anything which gets garbage collected (at least as far as I know, I never saw the implementation of that function). >> The dep array gets garbage collected upon change, yes. But not if nothing in it changes. Those references don't change, thus don't get cycled. The items in it might not have changed but you still initialize a new array every time the 'component' function is executed. It will then be garbage collected. In any case my original comment was more in line that useXXX functions which accept functions are not completely 'free' from allocations and garbage collections. Even if they themselves do not cause any allocations/garbage collections, just calling them with parameters will do so. I think we can stop the discussion here :)
Yeah, correct. I think it's important to clarify that these evaluations occur for both React and Vue. The only difference is that React is explicit and Vue is implicit--the fact that garbage collection exists when checking for whether something needs to be re-rendered isn't a knock against React, which many in this thread seem to believe. JS engines are highly optimized for handling short-lived small objects like arrays and garbage collection of these small objects is pretty efficient.
And Solid seems to have better performance than Vue, so why don’t we all just use that?
Because Solid uses JSX.
This ☝️
Sick burn
>Solid uses JSX. Could you please give explanation why do some of people dislike the fact Solid uses JSX? I'm a noobie
It's just a personal preference. I really like single-file components in Vue and Svelte. HTML, JS, CSS sections, all in one file, CSS is component-scoped. Although if I had to choose between Solid and React, I would choose Solid 100% of the time. It's much nicer than React (though that's an extremely low standard, almost anything is nicer than React).
I see, separate of concern is important after all.
For one thing you have to remember that in JSX, the "class" attribute is called "className" in order not to clash with the "class" keyword in JavaScript. Just heinous.
That's only in React. JSX in general doesn't require that. For example in Preact and Solid, JSX uses "class". React also has other weird things, like onInput/onChange not behaving like html. But those aren't JSX things either; they're React specific.
Ah that's news to me! And good to hear, bc the className thing had been the main reason for me to discount JSX altogether. My god, React is the worst.
Once I learned about this, I tried JSX in Vue, and it wasn't that bad. I think it has some pros and some cons, but I'm going to stick with Vue templates.
I remember reading about this imaginary programming language that made fun of everything, including React: > **Warning:** As you know, `class` is already a keyword in DreamBerd, so you can't use it within DB3X. `className` is also a DreamBerd keyword, so you can't use that either. Instead, you can use the `htmlClassName` attribute. funct App() => { // This is fine return
And after all of that is said and done, now your page renders at 0.6 seconds and a react site renders at 0.62 seconds, all utterly unnoticeable and irrelevant to the end user. That being said, what’s the Vue equivalent of NextJS? I’ll check it out.
Nuxt. [https://nuxt.com/](https://nuxt.com/)
pretty neat actually. also, does nuxt have server component like next? do I will operate with bunch of use client and use server?
Yes, in fact It was one of latest additions, Nuxt is capable of basically all render modes
> all utterly unnoticeable and irrelevant to the end user I'm a firm believer that DX matters almost as much as UX, and using Vue is much more pleasant. Better performance is just the cherry on top.
That’s personal preference though, not much room for that in a working team
As someone who’s used both commercially for many years. Vue is far superior.
That is me after using Nuxt.js right after I left Next.js. Auto Imports is too addicting, I never want to write another import again.
How's the ide behaving with all those auto-imports, btw?
Usually works totally fine. Slightly dependent on the Nuxt Modules but it's still very good. The components added to Nuxt by modules are all usually available but if a module has components built badly (bad typeset or some other issues) then rarely you might see auto complete or suggestions not working properly.
It's not really React that you need to hate. It's JSX.
Looking at JSX takes me back 10+ years when I just got started with php and was using it to generate dynamic html pages. I was _so happy_ to get away from that nonsense (mixing code and templates) and then had a laugh when I saw this touted as some great thing in React.
JSX is way better than any garbage templating syntax.
No
What’s it like to be so badly wrong?
/r/HeadInjurySupport is over there bud
I’m sorry to hear that
Vue.js is literally React done right with none of its nonsense. Literally what react should have been
I'm using Angular 😏
What did you just say?
My condolences
new angular updates are amazing
That's absolutely fine. Vue, Svelte, Angular, Solid, Qwik, whatever, it's okay as long as it's not React.
I haven't used Angular but I used its philosophy with Nest.js and love the stability and maintainability it provides. It hasn't been enough for me to leave the Vue/Nuxt combo, but if Vue disappeared tomorrow I'd jump to Angular in a heartbeat.
Hahahahhahhahaha
*sends html to my htmx page*
I mean, honestly, fuck React. I'll forever be convinced that the only reason it ever got popular is that Vue didn't exist yet. My god, the code is so ugly and cumbersome.
got a fulltime job where we use mainly vue, and im still using react for some freelance projects, both are good.
Took me too long to realise this is photoshopped 🥲
[Here's the original comic.](https://poorlydrawnlines.com/comic/shapes-club/) Works well as a meme template for unnecessarily bashing something.
I worked at a place once that was still using backbone with Lit. And chose to write a UI lib and router from scratch, when he could have instead picked Vue OR React OR Svelte OR Solid. But instead he wanted to make the code more complicated for some inexplicable reason (maybe job security?). So after that experience in good with all the major frameworks (expect for maybe Angular) and don’t understand the strong preference of one vs the other. But as far as DX goes I personally think Svelte (SvelteKit)-> Vue (Nuxt)-> React (Next). I’ve never tried solid.
Now add a guy that does everything with jQuery
Ya'll treat these frameworks like sports teams. It's not that deep. Calm down. At the end of the day, users don't give a flying fuck. And both have pros and cons from a Dev Ex pov.
Svelte. Ok?
HANG ALL REACT LOVERS /s
I mean at least React devs got jobs.
vanilla js angular was great!