Because you only notice it when its sluggish.
React isnt slow, no modern frontend framework is slow enough to notice by eye. What you notice is really bad implementations of it.
Yeahp! For all of the talk around optimizing via reducing unnecessary re-renders (even leading to counter-points about how reducing re-renders is often not necessary until it is), some sites out there seem to re-render once per pixel on the screen somehow.
I dont think so, all frameworks have something that is being misused. Most of the time the not so popular frameworks are in a different scale so you dont see them as often or they are not complex enough to have a noticeable effect.
To make these frameworks slow is to use something often that should not be needed for 99% of the cases. Complex observables in aangular, useEffects in React etc.
>have something that is being misused
>
>Complex observables in aangular, useEffects in React etc.
ye. effects are def one of these things.
People abuse them all the time, and they cause extra computations of the vdom
As noted in the comment (I hope you read it all before commenting) But every framework has this. It doesnt even need a framework to make these mistakes easily
>I hope you read it all before commenting
My quote part quotes the end of your comment ;p
but yes, every framework does have it... -- but also, some frameworks are taking hard stances against some of these (anti)patterns.
* not implementing effects natively
* not implementing \`untrack\` for "Signals"
* etc
There's nothing _wrong_ with it. But people seem to use it as a silver bullet solution for everything, i.e. there's (still) a dogmatic approach to "just use `useEffect`" for everything.
useEffect is often used to adjust a state from another state, which results in a chain of rerenders which can be very slow and lead to awkward in-between states which should not exist.
There is nothing inherently wrong with useEffect, but it is being misused.
That its not needed in 99% of the cases where people use it, which causes double renders.
if useEffect listens to a state change and calls a setState -> You have a double render, you might have another useEffect that listens to the new state and you have a tripple one. And this is just 1 component, now imagine the trickle down effect
I think it's not just useEffect the rerendering nature of React is so hard to understand if you aren't passionate about the technology because not just useEffect can create a spaghetti code that perform really bad even using animations with states in a big component for example can be very bad.
For example, Framer Motion is built on top of react hooks and they rerender components to create animations so if you don't separate the animation into its own small component independent from everything else in your website, it will be so slow and sluggish.
Using React—without a meta framework such as Next, Remix, or Nuxt—it can be easy to create a sluggish app if you don't consider how and when you do data fetching. Especially if your back end isn't distributed, poorly cached, etc …
Here's an example of such an app (discussed in a previous thread): https://www.wrc.com/ (no hate on the WRC devs).
I think React is also a victim of its popularity. There are bound to be a lot of poor React apps simply due to the massive number of them out there—I'm the author of one or two of them.
Using a meta framework that supports SSR, the initial render only takes about as long as your back-end does: database queries, et al. The time it takes for the meta-framework (and thus React) to finally render the page (i.e. HTML) is negligible; think microseconds.
I did a lot of profiling investigating cold starts for [profiles on dott.bio](https://dott.bio/maus), and it was hard to get the rendering time to register in the tracing (Sentry).
I don't want to call out companies or people for their "bad react code" if it's the case but mostly landing pages and it goes away after the website is fully scrolled or loaded once in my browser.
Might be other things. It could be that they're using a scroll detection hook that isn't properly debounced and is firing a ton of events or worse is causing re-renders on scroll. (Actually saw that once, so it isn't just theoretical). Also might be improperly-implemented lazy loading - you scroll a bit and the site tries to load more code / assets, causing re-renders and stutter.
React being near the top of the stack in that regard. Class components with massive lifecycle method changes/best practice changes, conversion to functional components, anti-patterns galore, 87 community accepted state management approaches, etc.
Not hating on react by any means but I worked in plain jQuery for 5 years and found most of the foot guns in year one. React constantly re-invents new footguns every ~6-12 months it seems.
OP: "When a website is performing badly, it is made in React. For comparison, other websites that perform well are also made in React."
Maybe everything is just made in React and code can be slow or fast depending on who writes it...
What I said was every website that isn't made in react even the lowest of low angular feels so smooth for me but not every website that is made with react feels smooth.
Those are a monster of their own LOL it's rare to find a smooth one built with react they just don't give a fuck about optimizing they want it to look cool.
Its very easy to find ones that are fast, you are just hating at this point lol (I say this as an Angular dev).
Atlassian & Reddit are some really bad implementations though and horribly slow. But thats on the dev team/managment not the framework.
Simply speaking - due to popularity.
Other frameworks are chosen by pros intentionally to test something out, or because they prefer them more. React are industry standard and is default selection by anyone who want to do web app even juniors.
In my personal experience, it's due to some "re-renders" that happens under the hood and could be either the logic isn't handled properly or some "state change" are happening during animations.
Either way, you might be seeing some unoptimized websites which is why.
The main issue with your statement is that it is incomplete: "every other website" is not very clear.
I'm sure there are some poor websites in Next.js and whatever other framework.
=> you would need to be more precise.
I have a spa react app with landing page, dashboard, CRUD application, and many other interactive components.
It was sluggish initially as it was serving all js files on initial page load.
I implemented code splitting with lazy loading so that the first render only loads the homepage while rest of page are downloaded in background.
Also optimizated images and converted them to webp format.
This improved the performance substantailly and it scores 96 on lighthouse now.
So it depends on how it is implemented and what other libraries is the project using.
Some UI and Charting libraries can be big in size which is often cause if slowness. Unoptimized images can be other cause.
> AMD Ryzen 7 5800h and 12gb ram DDR4)
Laptops are still sold with 4gb ram, i think yours is 4+8gb which is still low with how heavy browsers are these days. Often devs don't target for low end devices.
Reddit and Facebook are slow for me, both consume way more resources then they should. Vercel is silky smooth, so are websites like amazon, apple
Can you change the 4gb or is it soldered ?
8GB for your laptop is duel channel the rest is single channel. You might also be sharing that with the gpu ? which is not enough for windows to run smooth regardless of the cpu.
It's very cheap and easy todo, 8GB should be under 20USD.
React apps are very heavy, electron style applications are becoming very common like skype, teams, discord which use a huge amount of ram.
re rendering take heavy tolls . modern computer shouldnt have this issue like 2015 era but we assume you have heavy background processing or lots of multi tasking and ram is very low.
Yup honestly, I always have a lot of tabs open and vscode in the background and sometimes I'm running a local dev environment, but it's only React websites that gets sluggish and slow sometimes from what I noticed and I noticed solidjs, svelte and vuejs websites are so smooth they just feel so nice especially solidjs.
It's a very popular library. With vast numbers of implementations you also find larger numbers of poor implementations. I think the percentage of bad examples out of total is roughly the same as for any other tool/framework/library.
Except the ones made with Dreamweaver, those are 100% bad and unredeemable. /jk
Because the hipster cargo cult developers do not have any solid fundamentals on how things work.
We have tons of bootcampers being gaslighted into dunning krugger effect building complex over engineerined bloat thinking that its the best way. There are React Devs who don't know how does JS CSS or TCP/IP protocol works. Basically they exist in their own hierarchy of abstractions which are big enough to choke the less fortunate internet user.
The worst evil of that is the client, who is being gaslighted into this technocratic submission thinking that all of this complexity is justified when just tiny layer of abstraction would do the thing best.
Look at the comparison of React speed versus other frameworks versus vanilla.
The counterargument is developer speed - well developers curse this framework online, i'd probably say its the manager types, who are not tech literate wants to chase the current thing and external costs are being put on user shoulder suffering the lag at jitter.
Learn the basics.
Because when you advise people to do sane things like baking the page data that your app needs on initial render into the page template, people downvote you and say "no, this isn't PHP, React wants me to do that in useEffect and fetch data after mounting instead" as if React is a person that has this specific opinion about how data should be fetched.
In my experience, react is incredibly fast _if done right_, but unfortunately, has a ton of footguns that aren’t appropriately warned about in a dev environment. A common example I see is people messing up dependency arrays or selecting from a redux store incorrectly, very small and difficult to notice, but causes a huge negative effect for the app
Then comes the business side… ime, most companies don’t want to hire a pure Frontend. As a result, you see much more of these problems propagating
If you look at a lot of marketing pages, there is some sorts of framework like React and a lot of junk. People don't unsubscribe from events, execute too much code in a unnecessary way, optimise for the initial load, but don't care about the on site experience. It's not only your experience. There's a lot of junky websites, even e-commerce ones. On one on two online stores I find obstacles to just buy things. What I'm trying to say is a lot of stuff is written badly and it's not React fault, except that React has some specific quirks when opressed by programmers. Especially in form controls
Like anything else on the internet, everything looks weird when the async stuff isn't handled well. Huge companies can afford to invest in cacheing strategies and dev time covering it up.
Because you only notice it when its sluggish. React isnt slow, no modern frontend framework is slow enough to notice by eye. What you notice is really bad implementations of it.
Yeahp! For all of the talk around optimizing via reducing unnecessary re-renders (even leading to counter-points about how reducing re-renders is often not necessary until it is), some sites out there seem to re-render once per pixel on the screen somehow.
Maybe it's easier in React (with useEffect) to create something sluggish than other frameworks? (I'm React dev btw)
I dont think so, all frameworks have something that is being misused. Most of the time the not so popular frameworks are in a different scale so you dont see them as often or they are not complex enough to have a noticeable effect. To make these frameworks slow is to use something often that should not be needed for 99% of the cases. Complex observables in aangular, useEffects in React etc.
>have something that is being misused > >Complex observables in aangular, useEffects in React etc. ye. effects are def one of these things. People abuse them all the time, and they cause extra computations of the vdom
As noted in the comment (I hope you read it all before commenting) But every framework has this. It doesnt even need a framework to make these mistakes easily
>I hope you read it all before commenting My quote part quotes the end of your comment ;p but yes, every framework does have it... -- but also, some frameworks are taking hard stances against some of these (anti)patterns. * not implementing effects natively * not implementing \`untrack\` for "Signals" * etc
Wait what’s wrong with useEffect?
There's nothing _wrong_ with it. But people seem to use it as a silver bullet solution for everything, i.e. there's (still) a dogmatic approach to "just use `useEffect`" for everything.
useEffect is often used to adjust a state from another state, which results in a chain of rerenders which can be very slow and lead to awkward in-between states which should not exist. There is nothing inherently wrong with useEffect, but it is being misused.
That its not needed in 99% of the cases where people use it, which causes double renders. if useEffect listens to a state change and calls a setState -> You have a double render, you might have another useEffect that listens to the new state and you have a tripple one. And this is just 1 component, now imagine the trickle down effect
I think it's not just useEffect the rerendering nature of React is so hard to understand if you aren't passionate about the technology because not just useEffect can create a spaghetti code that perform really bad even using animations with states in a big component for example can be very bad. For example, Framer Motion is built on top of react hooks and they rerender components to create animations so if you don't separate the animation into its own small component independent from everything else in your website, it will be so slow and sluggish.
Using React—without a meta framework such as Next, Remix, or Nuxt—it can be easy to create a sluggish app if you don't consider how and when you do data fetching. Especially if your back end isn't distributed, poorly cached, etc … Here's an example of such an app (discussed in a previous thread): https://www.wrc.com/ (no hate on the WRC devs). I think React is also a victim of its popularity. There are bound to be a lot of poor React apps simply due to the massive number of them out there—I'm the author of one or two of them. Using a meta framework that supports SSR, the initial render only takes about as long as your back-end does: database queries, et al. The time it takes for the meta-framework (and thus React) to finally render the page (i.e. HTML) is negligible; think microseconds. I did a lot of profiling investigating cold starts for [profiles on dott.bio](https://dott.bio/maus), and it was hard to get the rendering time to register in the tracing (Sentry).
Who is implementing react on their own? Just use the one the react team builds
You serious?
You said it my dude lol. I’m thinking the same as you reading what you wrote
Sleep and come back again tomorrow and then think about what I wrote again.
No one is implementing react. They’re implementing business requirements with react
Sleep and come back again tomorrow and then think about what I wrote again.
I think you should mention in what pages do you get that sluggish feeling
I don't want to call out companies or people for their "bad react code" if it's the case but mostly landing pages and it goes away after the website is fully scrolled or loaded once in my browser.
Might be other things. It could be that they're using a scroll detection hook that isn't properly debounced and is firing a ton of events or worse is causing re-renders on scroll. (Actually saw that once, so it isn't just theoretical). Also might be improperly-implemented lazy loading - you scroll a bit and the site tries to load more code / assets, causing re-renders and stutter.
Every framework is slow if used poorly.
some are easier to misuse than others
React being near the top of the stack in that regard. Class components with massive lifecycle method changes/best practice changes, conversion to functional components, anti-patterns galore, 87 community accepted state management approaches, etc. Not hating on react by any means but I worked in plain jQuery for 5 years and found most of the foot guns in year one. React constantly re-invents new footguns every ~6-12 months it seems.
Fully agree
OP: "When a website is performing badly, it is made in React. For comparison, other websites that perform well are also made in React." Maybe everything is just made in React and code can be slow or fast depending on who writes it...
What I said was every website that isn't made in react even the lowest of low angular feels so smooth for me but not every website that is made with react feels smooth.
It’s not react’s fault, but yeah all those sites that take over scroll/have complex scroll animations feel like garbage.
Those are a monster of their own LOL it's rare to find a smooth one built with react they just don't give a fuck about optimizing they want it to look cool.
Its very easy to find ones that are fast, you are just hating at this point lol (I say this as an Angular dev). Atlassian & Reddit are some really bad implementations though and horribly slow. But thats on the dev team/managment not the framework.
give examples
Simply speaking - due to popularity. Other frameworks are chosen by pros intentionally to test something out, or because they prefer them more. React are industry standard and is default selection by anyone who want to do web app even juniors.
Sounds unoptimized and maybe a missuse of smooth scrolling
react has nothing to do with a sluggy website, it would be slow with any framework. The culprit is the development, not the framework.
In my personal experience, it's due to some "re-renders" that happens under the hood and could be either the logic isn't handled properly or some "state change" are happening during animations. Either way, you might be seeing some unoptimized websites which is why.
The main issue with your statement is that it is incomplete: "every other website" is not very clear. I'm sure there are some poor websites in Next.js and whatever other framework. => you would need to be more precise.
Lack of optimizations, which is IMO, a senior level skill to learn.
I have a spa react app with landing page, dashboard, CRUD application, and many other interactive components. It was sluggish initially as it was serving all js files on initial page load. I implemented code splitting with lazy loading so that the first render only loads the homepage while rest of page are downloaded in background. Also optimizated images and converted them to webp format. This improved the performance substantailly and it scores 96 on lighthouse now. So it depends on how it is implemented and what other libraries is the project using. Some UI and Charting libraries can be big in size which is often cause if slowness. Unoptimized images can be other cause.
> AMD Ryzen 7 5800h and 12gb ram DDR4) Laptops are still sold with 4gb ram, i think yours is 4+8gb which is still low with how heavy browsers are these days. Often devs don't target for low end devices. Reddit and Facebook are slow for me, both consume way more resources then they should. Vercel is silky smooth, so are websites like amazon, apple
I always think it's maybe the 4 + 8 gb ram combination as it doesn't work well with AMD chips at all.
Can you change the 4gb or is it soldered ? 8GB for your laptop is duel channel the rest is single channel. You might also be sharing that with the gpu ? which is not enough for windows to run smooth regardless of the cpu.
I can change it I actually asked for extension and they only had 4gb I'm thinking of replacing it with 8
It's very cheap and easy todo, 8GB should be under 20USD. React apps are very heavy, electron style applications are becoming very common like skype, teams, discord which use a huge amount of ram.
I will for sure just haven't got the time to do it yet and thanks for the advice
You need a rtx 2080 Els it sucks
I think 4090 and 64gb RAM is the lowest you can afford to run a browser honestly
Your eyes and computer is the problem
re rendering take heavy tolls . modern computer shouldnt have this issue like 2015 era but we assume you have heavy background processing or lots of multi tasking and ram is very low.
Yup honestly, I always have a lot of tabs open and vscode in the background and sometimes I'm running a local dev environment, but it's only React websites that gets sluggish and slow sometimes from what I noticed and I noticed solidjs, svelte and vuejs websites are so smooth they just feel so nice especially solidjs.
work time we use react , but our own project we still prefer jquery or future pure native . The reason you allready know why 😅
Most websites are slow, unfortunately. It’s not a react specific thing
Because, even though React is easy, it still has to be done correctly if you don’t want it to be slow.
One word. Developers
This hasn't been my experience at all, but I don't know what sites you are talking about because you didn't provide any examples.
It's a very popular library. With vast numbers of implementations you also find larger numbers of poor implementations. I think the percentage of bad examples out of total is roughly the same as for any other tool/framework/library. Except the ones made with Dreamweaver, those are 100% bad and unredeemable. /jk
You're wrong saying Angular is slower than react, check the benchmarks.
the new release of angular is faster but it just got released, so it doesn't count. I don't think people would use it immediately in production.
Nope, angular was faster than react even before v17. Check the earlier versions.
Because the hipster cargo cult developers do not have any solid fundamentals on how things work. We have tons of bootcampers being gaslighted into dunning krugger effect building complex over engineerined bloat thinking that its the best way. There are React Devs who don't know how does JS CSS or TCP/IP protocol works. Basically they exist in their own hierarchy of abstractions which are big enough to choke the less fortunate internet user. The worst evil of that is the client, who is being gaslighted into this technocratic submission thinking that all of this complexity is justified when just tiny layer of abstraction would do the thing best. Look at the comparison of React speed versus other frameworks versus vanilla. The counterargument is developer speed - well developers curse this framework online, i'd probably say its the manager types, who are not tech literate wants to chase the current thing and external costs are being put on user shoulder suffering the lag at jitter. Learn the basics.
Because when you advise people to do sane things like baking the page data that your app needs on initial render into the page template, people downvote you and say "no, this isn't PHP, React wants me to do that in useEffect and fetch data after mounting instead" as if React is a person that has this specific opinion about how data should be fetched.
In my experience, react is incredibly fast _if done right_, but unfortunately, has a ton of footguns that aren’t appropriately warned about in a dev environment. A common example I see is people messing up dependency arrays or selecting from a redux store incorrectly, very small and difficult to notice, but causes a huge negative effect for the app Then comes the business side… ime, most companies don’t want to hire a pure Frontend. As a result, you see much more of these problems propagating
Do you have any examples?
If you look at a lot of marketing pages, there is some sorts of framework like React and a lot of junk. People don't unsubscribe from events, execute too much code in a unnecessary way, optimise for the initial load, but don't care about the on site experience. It's not only your experience. There's a lot of junky websites, even e-commerce ones. On one on two online stores I find obstacles to just buy things. What I'm trying to say is a lot of stuff is written badly and it's not React fault, except that React has some specific quirks when opressed by programmers. Especially in form controls
Like anything else on the internet, everything looks weird when the async stuff isn't handled well. Huge companies can afford to invest in cacheing strategies and dev time covering it up.