Log in to GraphQL Editor
SolidJS: a new framework with true reactivity and top performance.
Michal

Michał Tyszkiewicz

6/29/2022

SolidJS: a new framework with true reactivity and top performance.

As far as JavaScript frontend frameworks go most people stick with React and it has been by far the most widely adopted framework and has enjoyed pretty high levels of user satisfaction (67% per State of JavaScript Report). Although there were a number of other frameworks, for a long time React together with Angular and Vue made up the big three and the main competition was between them. This changed a bit in 2019 when a new framework called Svelte entered the scene and reached high levels of interest almost immediately due to a completely different approach.

Svelte

Unlike traditional frameworks which use virtual DOM and do most of their work on runtime, Svelte opts for a dispersed approach, compiling HTML templates to specialized code which manipulates the real DOM directly. App code is processed by the compiler, inserting calls to automatically re-compute data and re-render UI elements only when the data they depend on is modified. This means much improved performance, less data needed to be transferred and most importantly: no overhead in the shape of virtual DOM. These advantages clearly explain why the appearance of Svelte had generated a lot of interest. While adoption has not entirely followed suit it has been steadily growing every year, from not even 7% in 2019 to almost 18% last year. I absolutely wouldn't want to discourage you from jumping on the Svelte hypetrain, but there is an even newer framework that builds on its idea and can gain even more interest!

SolidJS

SolidJS is based on a similar idea as Svelte, the key aims being focusing on pragmatism and performance. At first glance it actually shares a lot of similarities with React, little wonder since it emphasizes true reactivity. It’s still components and JSX so if you’ve used React and Hooks it should be very familiar, but there are some key differences:

  • no virtual DOM: Similarly to Svelte, instead of making changes to virtual DOM, then comparing them to the real DOM and merging both, Solid uses a compiler to convert your code to vanilla JavaScript and work with only the real DOM. This means with state updates only the code it depends on runs, instead of running all that overhead code.
  • no unnecessary re-renders: Solid brags about fine-grained updates, and rightfully so. It can track the changes happening in components and doesn't need to re-render them every time they’re used, unlike for example React. Components get rendered only once and then only the JSX expressions and primitives which are being used in the component are updated.
  • the king of performance: As we can see on The JS Framework Benchmark Solid is way ahead of other frameworks in terms of speed and is even really close to vanilla JavaScript's speed. Sure you might think other frameworks are fast enough, but keep in mind its not doing that via some complicated hacks, it's mostly a byproduct of its pragmatic approach and you’re getting all that in just 6.4 kB!
  • still plenty of features: Performance and tiny size doesn't mean you’re missing out on anything. Solid still provides basically the same developer experience as all those bigger and slower frameworks. You get full JSX and TypeScript support and a number of features you should be familiar with from React like: context, fragments, SSR, hydration, directives, portals, fragments and a lot more.

React as React should be?

One reaction to Solid I’ve seen in a lot of places is: “Why doesn't React work like this?” It makes sense since it is so familiar and is actually ‘truly reactive’ unlike React itself (which uses a scheduler, which marks which components should be updated and then updates and re-renders them all). To me it's clear that Solid has improved on those concepts of React, but that quote is actually really telling. We're still thinking of React when looking at Solid and that's because we all know it and most of us use it. That's the one area where React has Solid beat, the community is much larger, there's more third party tools, libraries and resources. All because it's been here much longer and is so widely adopted. So while you might not get to work with Solid on every project just yet, it's still great to check out. It's clearly better and simpler in certain aspects and because of that you can't say for certain it won't be the new big framework in a few years.

Check out our other blogposts

Getting started with React & GraphQL part I
Robert Matyszewski
Robert Matyszewski
Getting started with React & GraphQL part I
26 min read
about 5 years ago
Saleor - a GraphQL-first open-source e-commerce platform
Michał Tyszkiewicz
Michał Tyszkiewicz
Saleor - a GraphQL-first open-source e-commerce platform
5 min read
over 2 years ago
Top tools for a junior frontend developer
Robert Matyszewski
Robert Matyszewski
Top tools for a junior frontend developer
5 min read
about 5 years ago

Ready for take-off?

Elevate your work with our editor that combines world-class visual graph, documentation and API console

Get Started with GraphQL Editor