Best React-like JSX UI libraries in 2020
Tags: react, javascript, webdev
Published: 2020-09-02 19:56:31

The continuous impact  **React**  has on front-end development is unprecedented. Ever since its original release, it inspired tons of other  **JavaScript UI libraries**, brought a number of new concepts to web development, and committed to the open-source expansion.

But React is not without its flaws. That's why many developers turn to  _"alternatives"_  like Vue and Angular. But are these really  _"React alternatives"_? I mean, even though all 3 share basic, general concepts like  **state**  and  **reactivity**, they all differ vastly from each other. They aren't interchangeable and require you to take your time and adapt your mindset to the new tool.

Now, in this article, I'd like to present to you 4 of what I think are actual  **React alternatives**. React-like libraries that are heavily inspired by the original version, with JSX, state, reactivity, and more goodness built-in - with some additional perks here and there.

# [Preact](https://preactjs.com/)

![Preact landing page](https://areknawo.com/content/images/2020/07/preact.png)

Starting with the most obvious one -  **Preact**. It's been around for a while now, and if you've ever looked for any React alternative you most likely have already seen it (it's one of the  [top results on Google](https://www.google.com/search?q=react+alternative)). It's biggest advantages, when compared to React, are its  **performance**  and tiny size (**4KB**  min+gzip). Now, sure - other alternatives on this list have even more impressive specs, but none of them come as close as Preact to  **React compatibility**. Only with this library (with some help from additional  [compat](https://github.com/preactjs/preact-compat)  module) can you get close to full compatibility.

So, to sum it up, Preact is a great option if you want to almost  _"magically"_  increase the performance of your React app. Being faster and smaller, while also highly compatible with React, Preact is somewhat like a drop-in replacement for a great many cases.

# [Hyperapp](https://github.com/jorgebucaran/hyperapp)

![Hyperapp README](https://areknawo.com/content/images/2020/07/hyperapp.png)

When compared to the likes of Preact,  **Hyperapp**  is a completely different beast. Rather than React compatibility, it focuses on being super  **lightweight**  and  **ultra-fast**, while not requiring a compiler or bundler of any kind. That is unless you want to use JSX, which the library supports alongside simplistic state management and highly-optimized virtual DOM - all that in tiny  **1.7KB**  (min+gzip) of code!

But if that sounds too minimalistic for you, there's still a couple of official  _"add-on"_  libraries for well-integrated functionalities like  **HTTP requests**  or  **timers**. Additionally, with almost  **18K GitHub stars**  and quite a big active community, you can expect many third-party tools, libraries, tutorials, and more (less so for freshly-released  **V2**, but still).

# [Crank.js](https://crank.js.org/)

![Crank landing page](https://areknawo.com/content/images/2020/07/crank.png)

Next up, we've got  **Crank.js**, which is a fairly young open-source framework launched in the first half of 2020 and focusing heavily on asynchronicity and promises.

Crank.js may not be the smallest (**4.5KB**  min+gzip) or the fastest entry on this list, but it has a lot going for it. Declarative, JSX-centric syntax, heavy focus on  **plain JavaScript**  without any unnecessary clutter, and most importantly -  _"first-class"_  support for  **promises**, allowing you to create your Crank.js components with async functions! In modern web development with apps requiring well-behaved integration between the UI and async elements like HTTP request or timers, the built-in async components and  **concurrent rendering**  functionality that Crank.js provides, with nothing more than native JS promises (with optional async/await syntax) and  **generator functions**  is truly impressive!

# [Solid](https://github.com/ryansolid/solid)

![Solid README](https://areknawo.com/content/images/2020/07/solid.png)

Lastly, we've got  **Solid**, which is completely different from all previous listings. Similarly to  [Svelte](https://svelte.dev/), which you  [might have heard of](https://areknawo.com/svelte-a-recipe-for-a-successful-framework/)  recently, Solid combines JSX with a  **compiler**!

Instead of doing its work at runtime like most UI libraries, Solid includes a compiler that processes your code, which results in  **heavily-optimized**, ultra-lightweight, and crazy-fast web applications (that's a lot of positive adjectives right there). How fast you might ask? Well, fast enough to be one of  [the fastest UI libraries](https://krausest.github.io/js-framework-benchmark/current.html)  out there, competing with only a few - among which are vanilla JS implementations!

What's more, is that this speed doesn't come with any feature degradation. Thanks to its compiler-based approach Solid can easily support well-known React goodies like  **context**,  **suspense**,  **SSR**,  **async rendering**, and more without sacrificing on the resulting app's size (the compiler includes only what you use) or performance.

Now, sure, the Solid approach to development might require a small change of mindset for some, but if you need the best possible performance and smallest build size, without sacrificing development experience, Solid is a really  _solid choice_. ;)

# Bottom line

So, that's just a brief overview of some of these options. If you're interested in any of them - feel free to check out their respective  **websites**,  **docs**, and  **GitHub repos**.

What I find interesting about all of them, is that even though they all draw inspiration from JSX and React with all its industry-leading innovations, none of them are really that similar. In just these 4 options we've got what seems like a complete  **diversity**  composed of React compatibility, fast and easy runtime-based development, simplistic async components with concurrent rendering, and a compiler-based approach. Nothing here is  _"just another framework"_. Everything brings some kind of value to the JavaScript ecosystem - either directly or indirectly by inspiring other web developers to come up with even better ideas. That's just how things are now -  **that's how web dev rolls**.

Anyway, feel free to let me know what you think of the current state of the JS ecosystem and all the UI libraries listed above in  **the comments below**. Also, if there are any other interesting options that I missed, feel free to leave them there as well.

For more up-to-date web dev content,  **follow me**  on  [Twitter](https://twitter.com/areknawo),  [Facebook](https://facebook.com/areknawoblog), or through  [my personal blog](https://areknawo.com). Thanks for reading and happy coding!