SolidJS: Fine-Grained Reactivity Guide and SolidJS vs React

SolidJS (also written Solid.js) is a reactive JavaScript library for building user interfaces, created by Ryan Carniato. It looks like React because it uses JSX, but it works very differently underneath: there is no virtual DOM, and updates happen through fine-grained reactivity built on signals.

What Is SolidJS?

SolidJS is a declarative UI library that compiles JSX into direct DOM operations and tracks state with signals. Components run once to set up the DOM, and when a signal changes, only the exact text nodes or attributes that depend on it update. There is no virtual DOM diffing and no component re-rendering, which gives SolidJS very high benchmark performance and a small runtime.

How SolidJS Works

Signals

State in Solid lives in signals. createSignal returns a getter and a setter:

import { createSignal } from 'solid-js';

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

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

Notice that you call count() to read the value. That call is how Solid knows which parts of the UI depend on the signal.

Components run once

In React, a component function re-runs on every state change. In Solid, the function body runs once. Only the expressions that read signals (like {count()} above) are re-evaluated. That is why Solid has no useMemo, useCallback or dependency arrays.

Effects and derived values

import { createSignal, createMemo, createEffect } from 'solid-js';

const [first, setFirst] = createSignal('Ada');
const [last, setLast] = createSignal('Lovelace');

const fullName = createMemo(() => `${first()} ${last()}`);

createEffect(() => {
  console.log('Name is now', fullName());
});

createMemo caches a derived value, and createEffect re-runs when the signals it reads change. Dependencies are tracked automatically.

Control flow components

Because components run once, Solid uses components for conditionals and lists instead of plain JavaScript expressions:

import { Show, For } from 'solid-js';

function TodoList(props) {
  return (
    <Show when={props.todos.length} fallback={<p>Nothing to do</p>}>
      <ul>
        <For each={props.todos}>{(todo) => <li>{todo.title}</li>}</For>
      </ul>
    </Show>
  );
}

SolidJS vs React

Solid and React share JSX and a component mindset, but their runtimes differ.

When to choose SolidJS: performance-sensitive UIs with frequent updates, small bundles, and teams that like React syntax but want fewer footguns around re-renders. When to stay with React: you need the ecosystem, libraries, hiring pool and framework support, such as Server Components in Next.js. React also now has the React Compiler, which closes part of the gap by automating memoization.

The biggest habit change coming from React: do not destructure props, because that reads the values once and breaks reactivity. Use props.name, or Solid's splitProps helper.

SolidJS vs Vue and Svelte

Vue also has a fine-grained reactivity system, but it still renders through a virtual DOM (see my Vue 3 guide). Svelte compiles components away like Solid does, and Svelte 5 moved to a signals-based model called runes, which I compare with React in Svelte 5 vs React. All three converge on the same idea: track exactly what depends on what, and update only that.

SolidStart and Solid 2.0

SolidStart is the official meta-framework for Solid, covering routing, server rendering and server functions. For the meta-framework landscape on the React side, see TanStack Start vs Next.js.

As of this writing, Solid 2.0 is in release-candidate stage on GitHub (2.0.0-rc.17), so Solid 1.x remains the stable line. Check the Solid releases page and migration notes before upgrading, since 2.0 includes changes to the core primitives.

Frequently Asked

Is SolidJS better than React? It is faster in benchmarks and avoids re-render pitfalls, but React has a far larger ecosystem and job market. Pick Solid for performance and simplicity, React for ecosystem and hiring.

Does SolidJS use a virtual DOM? No. It compiles JSX to direct DOM operations and updates only what changed through signals.

Is SolidJS hard to learn if I know React? The syntax is familiar. The main adjustments are calling signals as functions, not destructuring props, and remembering that components run once.

What is SolidStart? The official full-stack meta-framework for SolidJS, with routing, server rendering and server functions.

Is Solid 2.0 released? As of this writing it is in release-candidate stage, so the stable line is still 1.x.