Why using React.js for a website is a bad idea?

Summary

New developers create websites using React.js because they get caught in the React hype-train, not knowing what the drawbacks are. React makes your website undiscoverable in search engines and also lower performance scores.

Unless your app lives behind an authentication layer or is a simple widget on a website, React is probably not a good choice. Please, keep in mind that Gatsby.js and Next.js are not part of this discussion.

Introduction

React.js is a popular framework that I don't really need to introduce. Tutorials on Udemy and YouTube keeps the React hype-train running, perhaps, rightfully so as knowing these frameworks make you more likely to land a job. Because they are just starting out, new developers get the wrong idea of treating every problem as if it were a nail and React.js a hammer.

Using React.js for everything is most likely a really bad idea. For example, think about a blog website where you make awesome posts about technology or personal development, you keep on making posts but for some reason you are not being featured in Google or Bing or other search engines. You fail to drive any traffic other than sharing links with people on social media.

SEO

Try to go to your React.js website, right click and click on "View Page Source" option. As soon as the source opens, you'll notice that other than headers, basic HTML skeletons, stylesheets and scripts, your website is empty. After doing that you'll understand why Google bots aren't interested in indexing your website.

Page Performance

I recently saw a listing post here on dev.to where a person listed a WordPress and React.js based theme, claiming it was a really "lighting fast." I'm assuming that the developer used WordPress as a headless CMS (API) and React.js as a separate front-end webpage. Despite the advertisement, the website was really really slow!

When I ran it in Google's PageSpeed Insight, it gave the score of 55. Main thread was being blocked by stylesheets for about 5 seconds, despite the fact that the CSS was stored inside the JS bundle. Wow! Non existent SEO and bad performance, all coming from React.js?

HTTP Requests

React Router helps you navigate between pages and fetches data using HTTP requests from a remote server. This gives new developers an illusion that the website is faster, yes, to some degree it is.

The problem is that sometimes HTTP requests may need to search for your or third party DNS (DNS lookups), wait for initial handshakes and wait data to be transferred. If you are making tons of HTTP requests, fetching things around from your server or otherwise, it can make your website really slow.

Yes, these problems can be solved using techniques like preloading, prefetching and caching. Actually, these techniques can not only be used in React.js but also server-side websites which can make your websites absolutely fast.

CSS in JS

This is something I used to use when I was learning React.js and every tutorial was pushing the idea of JSS. React is sadly a tool that completely disregards the basic principle of, "separation of concerns."

While I understand that JSX is transformed into React.createElement calls, trying to put your CSS in JS may not be a good idea. It not only increases your bundle size but also blocks thread when your bundle is including styles in your app.

Final Thoughts

Using React.js doesn't magically makes your websites any better or run faster. It isn't a magical technology that is answer to all development problems, rather, it is a tool that you should use when it is only appropriate to do so.

Perhaps you want your app to be light weight, use Svelte.js. Maybe your website has lots of widgets where you may need elements to be present in HTML for SEO reasons, you could opt for Vue.js. Enterprise level app? Go Angular.js. I'm not against React.js but against the erroneous hype.

Thank you for reading, I'd love to hear your thoughts.