Solid.js Has a Free Reactive Framework That's 5x Faster Than React — No Virtual DOM, No Re-Renders

The React Problem

React re-renders entire component trees. useMemo, useCallback, React.memo — you spend more time optimizing renders than writing features.

Solid.js uses fine-grained reactivity. Components run ONCE. Only the exact DOM nodes that depend on changed data update. No virtual DOM.

What Solid.js Gives You

Signals (Reactive Primitives)

import { createSignal } from 'solid-js';

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

  // This function runs ONCE. Only {count()} updates in the DOM.
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count()}
    </button>
  );
}

No re-renders. The count() call creates a subscription. When count changes, ONLY that text node updates.

Derived State

const [firstName, setFirstName] = createSignal('John');
const [lastName, setLastName] = createSignal('Doe');

// Automatically re-computes when dependencies change
const fullName = () => `${firstName()} ${lastName()}`;

No useMemo. No dependency arrays. Just functions.

Effects

import { createEffect } from 'solid-js';

createEffect(() => {
  // Automatically tracks dependencies and re-runs
  console.log(`Name changed to: ${fullName()}`);
  localStorage.setItem('name', fullName());
});

No useEffect dependency array bugs. Solid tracks dependencies automatically.

Control Flow

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

<Show when={user()} fallback={<p>Loading...</p>}>
  {(u) => <h1>{u().name}</h1>}
</Show>

<For each={items()}>
  {(item) => <li>{item.name}</li>}
</For>

Stores (Nested Reactivity)

import { createStore } from 'solid-js/store';

const [state, setState] = createStore({
  user: { name: 'John', settings: { theme: 'dark' } },
  posts: [],
});

// Update nested property — only that DOM node updates
setState('user', 'settings', 'theme', 'light');

Performance (JS Framework Benchmark)

Framework	Score (lower = faster)
Vanilla JS	1.0
Solid.js	1.05
Svelte	1.2
Vue 3	1.4
React	1.8

Solid is essentially vanilla JS performance with a reactive framework.

Quick Start

npx degit solidjs/templates/ts my-app
cd my-app
npm install
npm run dev

Why This Matters

React made us accept re-renders as normal. Solid.js proves they were always unnecessary. Same JSX syntax, 5x better performance.

---

Building high-performance data UIs? Check out my web scraping actors on Apify Store — fast data for fast frameworks. For custom solutions, email [e-mail].