SolidJS: a new framework with true reactivity and top performance.
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 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 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.
- 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.