If you do web development, chances are, you know what React is. It is one of the most well-known frameworks for building user interfaces using an HTML-like language called JSX.
However, React is not the only solution for making complex interactive user interfaces. Many alternatives, like Vue, Svelte, and vanilla JavaScript, can also be good choices. In this article, we will go over when you should and should not use React.
React’s creation
In 2011, Facebook needed an easier way to build their web app without wasting developer time. In 2011, Jordan Walke, an engineer at Facebook, created an experimental web framework called FaxJS. It promised easy component reuse, declarative updating based on state, and a seamless way to render on the client and server. FaxJS was first used on Facebook that year. Later, FaxJS was improved and renamed React. React was quickly adopted by developers, and many more features were added, like JSX in 2013, which allowed developers to write using an HTML-like language instead of raw function calls. They also have added things like React Native, allowing developers to use React to build mobile apps, and hooks that make it possible to use functions instead of classes for React components. All of this created the React known today.
When to use React
When you need a large ecosystem
If you are building an app that uses a lot of different packages and libraries, React can be a good choice. It currently has one of the largest ecosystems for web development frameworks, with helpful libraries like Material UI and React Spring. In fact, there are more than 75,000 packages on NPM with the React Keyword, which is almost three times the next largest framework, Vue. React also has a large and mature community, with lots of tutorials and guides on various aspects of React.
When you need a mature and widely used base
React is mature, having been used for years in production by many large companies, like Facebook, Netflix, Uber, and more. It is almost guaranteed to be stable, as Facebook uses the latest releases in production on their website and app. If you have an app that is required to be extremely reliable and stable, then React can be a good choice.
When to not use React
When you are worried about your app’s size
React can be very large. Just by adding React to your app, you add more than 121 kilobytes of code.
That 121 kilobytes can mean the difference between a snappy website and a slow-loading one. Slow websites can make your users more likely to leave the website. Many other frameworks like Vue, Preact, and Svelte have a much smaller bundle size and can be integrated without creating a much slower website.
Additionally, all of your JavaScript needs to download before your website can even be rendered if you use approaches like Create React App. This is because Create React App and other Single Page App approaches require React to build the HTML using the JavaScript downloaded, instead of serving a pre-built HTML file. This can hurt SEO by making it harder for search engines to understand your content and can make the content load slower for your users. However, there are solutions to this that render the HTML on the server like Next.js. Although even if you do that, it still can take some time for the page to become interactive.
When you need fast rendering
When you are making an app like a game or a demanding creative app, React is not the best choice. This problem stems from the fact that it uses a Virtual DOM. Virtual DOMs, or VDOMs, are layers that help make unoptimized DOM manipulations faster. For example, let’s look at an example of rendering data:
function render(data) {
document.body.innerHTML = `<div><h1>DATA</h1><span>${data}</span></div>`
}
render("Lorem ipsum colour")
In the example above, even though there is only a small string that is used, the whole document is rerendered. This can be very slow, as it takes time for the HTML to be parsed and rendered again. To solve this problem, React uses a VDOM. VDOMs keep the structure of the document in memory and then use that to figure out what has changed by checking to see what is different when you update the VDOM, making it possible to have tiny changes in HTML. However, managing the Virtual DOM has overhead and it is faster to just make optimized JavaScript in the first place. An example of this would be:
function render(data) {
document.querySelector("dataText").innerText = data
}
render("Lorem ipsum colour")
That example changes a lot less HTML, which makes it faster, and it does not have the overhead of the VDOM. So, while the VDOM can make unoptimized JavaScript faster, if you need top rendering performance, it is not the way to go. Additionally, some frameworks like Svelte move all of the VDOM computation into the compile step, making the output optimized JavaScript.
When you want a more powerful markup language
JSX is nice, but sometimes it can be verbose due to it basically being HTML with JavaScript mixed in. While it is easy to learn JSX due to it being so related to HTML, some markup languages, like Svelte, can be much less verbose. Svelte offers more abstractions, like built-in conditional blocks and reactive variables. for example, when you want to trigger an update, with React you need to use where in Svelte you can just set the variable. This can create more concise code and less development work once you learn the new syntax.
Conclusion
React is a great tool for building websites quickly. However, it is not for everything or everyone. It is not great for performance in general, and JSX could be more concise. There are also many great alternatives, like Vue, Svelte, and native JS. However, this might be somewhat biased, as I am a Svelte user. Anyway, I hoped you learned something from this, and thanks for reading.
Top comments (7)
I just glanced over the post, so I might be repeating something you already pointed out, but:
I will go all out and say, you don't need React, most times. This applies to almost any other big framework too.
For most people building small apps, the addition of a big framework might seem like a good idea, in the end it makes it so much easier to build right? Yes, but it also adds a lot of complexity, and unneeded clutter. Increasing the time needed to build your project. I've found out that most times I regret using React or Angular, etc... for small personal projects. I would much rather use something like Svelte, or similar low weight ones as you mentioned.
But, for medium/big apps, you most likely need one of the big ones. Which one, depends on a load of factors, from what your company uses, to what makes more sense for the specific purpose. A framework choice should always be evaluated before adopting.
I've made that mistake before, with Ionic, prematurely adopting it and building an app with it, which was re-written completelty in Flutter 2 years after. This could have easily been prevented if we would've tought about it for a minute, as it's quite obvious that Ionic was not a good choice for a big production app.
I totally agree, although you can use Svelte for large apps, in fact I do use Svelte often for those types of apps. As said in the article, I think the biggest reason people use React for things like large apps is that often they require lots of different tools, which aren't always offered by other frameworks like Svelte. Additionally, it can be harder for companies to find the right developers.
The point you bring up about Ionic and Flutter is interesting. Ionic is still used in some large apps, and I think it is starting to get into the same position that I think React is in. It has a much larger ecosystem (the web), but other frameworks like Flutter offer better performance and DX
Nice points, and yeah I think the same. Ecosystems are really important when deciding on a framework, and when one has the biggest ecosystem, it's normal for people to lean towards that framework. And in return more people add to that ecosystem, making it even bigger and so on.
Great way to put it, in terms of ecosystem Ionic and web based frameworks have the lead there, but in terms of DX things like Flutter are way ahead. For now at least, and hopefully the competition learns from them. (Flutter did, they mention React many times in the technical docs, using it as an inspiration on how to do and how to not do things, taking the best and learning from the worst part of it)
Preact is a good alternative to react if you want a smaller app but still a React compatible API. For performance, that is often true, although as noted in the article for cases that require lots of rendering using a framework like Svelte or Solid can noticeably improve performance.
For markup, I agree, everything you can do with markup languages like Svelte can be done with JSX, but often it can be more concise with Svelte. So it comes down to a matter of preference, as JSX as a lower learning curve but sometimes makes you write a bit more.
IMO if you need to rely on an ecosystem of react wrappers you need to relearn JavaScript
THX
Bear in mind that the 121kb figure is not an accurate description of what gets sent over the wire - the 39.4kb figure is.