Skip to main content

Solid.js Basics

Solid.js is a high-performance library that uses a React-like syntax (JSX) but performs direct DOM updates without a Virtual DOM, similar to Svelte's internal mechanics.

1. Philosophy of Solid.js​

  • No Virtual DOM: Performs optimized updates without the overhead of a Virtual DOM.
  • Fine-grained Reactivity: Unlike React, the entire component doesn't re-run; only the specific parts that have changed are efficiently updated.
  • JSX Support: React developers will find the syntax very familiar and easy to pick up.

2. Signal (State Management)​

The core of Solid.js is the Signal.

import { createSignal } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(0);

  return (
    <button onClick={() => setCount(count() + 1)}>
      {count()}
    </button>
  );
}

3. Differences from React​

  • While React components re-run their function body every time the state changes, a Solid component runs only once. From then on, only the parts of the code that subscribe to the Signal are updated.
  • There are almost no restrictions on the rules of hooks.

4. Why Solid.js?​

Solid.js consistently ranks among the top performers in speed benchmarks. It's highly recommended for developers who are comfortable with the React paradigm but seek extreme performance.