Introduction to SolidJS, better then Reactjs ?

SolidJS is a declarative, efficient, and flexible JavaScript library for building user interfaces. SolidJS is an UI library which is similar to Reactjs, Vue and Angular but at the same time it surpasses all the libraries.

In this post we are going to see is SolidJS is better then its competitors in terms of performance, functionality and size .

1. Performance

SolidJS performance

You will be amazed to see that SolidJS have surpassed all major competitors like Inferno, LitHTML, Svelte, Vue 3.0, React and Angular. I was also shocked when i seen the results. The library comes on top with comparison of performance with its competitors.

2. Bundle Size

SolidJS bundle size

That’s the thing that we all developers worry about. Bundle is the final output after the code optimization. We try to do to a bundle size comparison and we are amazed to see that Solid has surpassed Svelte which is excellent.

While it won’t win size in toy demos and benchmark where everything happens in a single Component, that honor probably goes to Svelte, when it comes to larger actual applications Solid has almost no overhead on Components (more like a VDOM library rather than a Reactive one).

3. Reactive Nature

We all love to work with React because of its reactive state/hooks feature that we mainly use to re render the UI. SolidJS have its own state management flow totally similar to React.

Solid’s data management is built off a set of flexible reactive primitives. Similar to React Hooks except instead of whitelisting change for an owning Component they independentally are soley responsible for all the updates.

Solid’s State primitive is arguably its most powerful and distinctive one. Through the use of proxies and explicit setters it gives the control of an immutable interface and the performance of a mutable one. The setters support a variety of forms, but to get started set and update state with an object.

Example

import { createState, onCleanup } from "solid-js";

const CountingComponent = () => {
  const [state, setState] = createState({ counter: 0 });

  const interval = setInterval(
    () => setState({ counter: state.counter + 1 }),
    1000
  );

  onCleanup(() => clearInterval(interval));

  return <div>{state.counter}</div>;
};

The fun thing here is that SolidJs doesn’t uses virtual dom instead of that it uses fine-grained updates.

4. Render

It used the render method to mount component to real DOM.

import { render } from "solid-js/dom";

const HelloMessage = props => <div>Hello {props.name}</div>;

render(
  () => <HelloMessage name="Taylor" />,
  document.getElementById("hello-example")
);

5. Nothing left

You maybe worry about the features that you may not gonna find in SolidJS. Guess what, it supports modern features like JSX, Fragments, Context, Portals, Suspense, SSR, Error Boundaries and Asynchronous Rendering. So you don’t need to worry about missing any feature. It also uses typescript.

I hope you liked SolidJS. We will try to write some articles of setup of SolidJS in future.

Also checkout how react works internally.

https://blogreact.com/how-react-works-internally/

Reference