DEV Community

Alex Spinov
Alex Spinov

Posted on

Solid.js Has a Free API: The React Alternative That's Actually Fast

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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>;
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Building high-performance web apps? Check out my developer tools or email spinov001@gmail.com.

Top comments (0)