What if React was designed today, knowing everything we've learned about reactivity? You'd get Solid.js.
What Is Solid.js?
Solid.js is a reactive JavaScript framework that looks like React but performs like vanilla JS. No virtual DOM, no diffing, no reconciliation overhead.
import { createSignal } from "solid-js";
function Counter() {
const [count, setCount] = createSignal(0);
return (
<button onClick={() => setCount(count() + 1)}>
Count: {count()}
</button>
);
}
Looks like React, right? But there's a crucial difference: this component function runs once. Only the {count()} expression re-executes when count changes. Not the entire component.
Why Solid.js Is Faster
React re-renders entire component trees. Solid updates only the exact DOM nodes that changed:
// In React: entire component re-renders on any state change
// In Solid: only the <span> text node updates
function UserProfile() {
const [name, setName] = createSignal("Alice");
console.log("This runs ONCE, not on every update");
return <span>{name()}</span>; // Only this updates
}
JS Framework Benchmark results: Solid.js is consistently #1 or #2, faster than React, Vue, Svelte, and Angular.
SolidStart: Full-Stack Framework
// src/routes/api/users.ts
import { json } from "@solidjs/router";
export async function GET() {
const users = await db.user.findMany();
return json(users);
}
// src/routes/index.tsx
import { createAsync } from "@solidjs/router";
export default function Home() {
const users = createAsync(() => getUsers());
return <For each={users()}>{user => <div>{user.name}</div>}</For>;
}
Server functions, API routes, SSR, streaming — all built in.
React Developer? Here's Your Cheat Sheet
| React | Solid |
|---|---|
useState |
createSignal |
useEffect |
createEffect |
useMemo |
createMemo |
useContext |
createContext + useContext
|
{items.map(...)} |
<For each={items}> |
{cond && <X/>} |
<Show when={cond}> |
The mental model transfers. The performance doesn't — Solid is just faster.
npx degit solidjs/templates/ts my-app && cd my-app && npm i && npm run dev
Building high-performance web apps? Check out my developer tools or email spinov001@gmail.com.
Top comments (0)