SolidJS Explained: React-Like Code, Svelte-Like Speed

Introduction

React (covered earlier) re-renders components when state changes, diffing a virtual DOM to find what updated. Svelte (batch 8) compiles that work away at build time. SolidJS, released in 2021, takes a third path that feels familiar to React developers but performs like Svelte: write JSX that looks like React, and get updates through fine-grained reactivity — only the exact DOM nodes that depend on changed state update, with no virtual DOM at all. It is consistently among the fastest frameworks in benchmarks, and the reason is architectural, not a trick.

Signals and fine-grained updates

Solid's core is signals — reactive primitives that track dependencies automatically:

• createSignal — holds a value and returns a getter and setter: const [count, setCount] = createSignal(0). Reading count() inside a component subscribes that exact text node to the signal.
• Fine-grained updates — when setCount runs, only the DOM nodes that read count() update. No component re-renders, no diffing, no virtual DOM walk.
• Effects — createEffect runs code whenever the signals it reads change, for side effects like logging or syncing.
• JSX, familiar — components look like React, but they run once: the JSX compiles to real DOM creation, and signals do all the updating afterward.

A counter shows the shape — React-like syntax, fundamentally different update model:

import { createSignal } from "solid-js";
function Counter() {
  const [count, setCount] = createSignal(0);
  return (
    <button onClick={() => setCount(count() + 1)}>
      Clicks: {count()}
    </button>
  );
}

The component function runs once; the {count()} text node updates itself whenever the signal changes. That is why Solid benchmarks near vanilla JavaScript: there is almost nothing between a state change and the DOM update.

The honest trade

Solid's trade is ecosystem: far fewer libraries, jobs, and learning resources than React, and its "components run once" model surprises React developers (effects and lifecycles behave differently). Server rendering and routing exist but are younger than Next.js's. The rule of thumb: Solid when raw performance and React-like DX both matter, especially for interactive widgets; React when ecosystem depth and hiring matter most.

Takeaway

SolidJS is React-like code with Svelte-like speed: JSX components that run once, signals tracking dependencies, and only the exact DOM nodes updating — no virtual DOM. It trades ecosystem size for performance that comes from architecture, not optimisation tricks.

Originally published at https://practicaldevblog.blogspot.com/2026/10/solidjs-explained-react-like-code.html