SolidJS: React's Performance Without React's Re-render Hell

I've been using SolidJS for 8 months after getting fed up with React's performance bullshit. Last time I checked it was on 1.8.something - honestly I don't track version numbers religiously, but it's actively maintained and getting regular updates.

Here's the thing - SolidJS looks like React but doesn't act like React under the hood. When you change state, it updates only the exact DOM nodes that need changing. Not the whole component tree, not a virtual DOM diff, just the specific text or attribute that changed. From what I've seen in benchmarks, SolidJS consistently ranks near the top. React is usually somewhere in the middle. The exact positions change but the pattern is consistent.

Signals Beat React's useState Chaos

Signals are what React's useState should have been. No dependency arrays, no "why is my effect running infinitely" moments, no stale closures:

function Counter() {
  const [count, setCount] = createSignal(0);
  
  return (
    <button onClick={() => setCount(count() + 1)}>
      Count: {count()}
    </button>
  );
}

This component function runs once. When you click the button, only the text inside updates. No re-renders, no reconciliation hell, no wondering why your expensive calculations are running again.

The Performance Numbers Are Actually Real

I was skeptical about the benchmark claims until I migrated a React dashboard with around 500 DOM nodes. Bundle went from like 180KB to maybe 50KB? I didn't measure it scientifically but it was a big difference. Load times went from "time to make coffee" to actually usable.

From what I've seen in benchmarks, SolidJS consistently ranks near the top for both speed and memory usage. The difference is real.

Learning Curve: Not as Bad as You Think

If you know React hooks, you'll pick up SolidJS in a weekend. The main gotchas:

• Signals are functions: count() not count
• Components don't re-run, so no local variables in render
• Stores for nested state instead of multiple useState calls

I spent maybe 3 hours debugging the parentheses thing when I started. First day I tried to use useEffect and got compiler errors for 20 minutes. After that, it's smooth sailing. The tutorial is actually good, unlike most framework docs that assume you're already an expert.

Production Reality Check

Used it on 3 production apps now. The ecosystem is smaller than React's, but the core stuff works great. TypeScript support is built-in, not an afterthought. Hot reload dies at least once a day, usually when you're deep in debugging and don't want to lose state - you have to restart the dev server.

Companies like Netlify and CodeSandbox use it in production. It's not some hobby project - it's solid enough (pun intended) for real applications.

After using SolidJS in production for months, here are the features that actually save you time (and the ones that'll bite you).

Stores: Better Than useState for Complex State

Stores are what you use when signals aren't enough. Think nested objects that stay reactive:

const [state, setState] = createStore({
  user: { name: "John", age: 30 },
  posts: [],
  loading: false
});

// Update just the age - everything else untouched
setState("user", "age", age => age + 1);

This is way cleaner than React's "spread everything and hope you didn't break immutability" dance. I spent 2 hours debugging a React state update that broke because I mutated nested data. With stores, you just update what you need.

Resources: Async That Doesn't Suck

The resource system handles loading states without the usual useState/useEffect mess:

const [user] = createResource(userId, fetchUser);

return (
  <div>
    <Show when={user.loading}>
      <div>Loading...</div>
    </Show>
    <Show when={user.error}>
      <div>Error: {user.error.message}</div>
    </Show>
    <Show when={user()}>
      <UserProfile user={user()} />
    </Show>
  </div>
);

No more "loading state got out of sync with data" bugs. No more forgetting to handle the error case. It just works, and when the userId changes, it automatically refetches.

SolidStart: SSR That Doesn't Fight You

SolidStart is their answer to Next.js. Used it for 2 projects now - it's surprisingly solid:

• File-based routing - drop a file in routes/, get a route
• API routes work like Next.js but simpler
• Deployment works on Cloudflare Workers, Netlify, anywhere really
• Islands architecture - only hydrate what needs to be interactive

The main gotcha: it's still in active development. Breaking changes happen between minor versions. Had to fix my routing twice in 6 months, but nothing I couldn't figure out in an hour or two.

The Compilation Magic (And When It Breaks)

SolidJS compiles your JSX into optimized DOM operations. This is why it's fast, but also why some things that work in React don't work here:

This breaks:

function Broken() {
  const items = [1, 2, 3];
  return <div>{items.map(i => <span>{i}</span>)}</div>;
}

This works:

function Fixed() {
  const items = [1, 2, 3];
  return (
    <div>
      <For each={items}>
        {(item) => <span>{item}</span>}
      </For>
    </div>
  );
}

You need control flow components instead of regular JavaScript. Took me a few "why isn't this rendering" moments to learn.

Ecosystem Reality

The ecosystem is smaller but the core stuff is there:

• Hope UI - Component library that doesn't suck
• Kobalte - Accessible headless components
• Solid Router - Client-side routing, docs are somewhere on their site

Missing stuff you might expect:

• No equivalent to React DevTools (they exist but they're basic)
• Animation libraries are limited
• Third-party integrations often need custom adapters

When SolidJS Pisses You Off

Hot reload breaks: Maybe once a day, you have to restart the dev server. Usually happens when you're deep in debugging mode and don't want to lose state. If hot reload breaks beyond repair: rm -rf node_modules/.vite && npm run dev - the nuclear option that actually works.

TypeScript inference gets confused: With complex stores or resources, TypeScript sometimes can't figure out types. You end up with manual type assertions all over the place.

Component patterns don't transfer: Coming from React, you'll try to use patterns that don't work. The mental model shift takes a few days - expect to delete and rewrite components when you realize you're fighting the compiler.

Debugging is different: No React DevTools means more console.log debugging. The browser extension exists but it's not as polished. When components aren't updating, first thing to check: Are you calling your signal as a function? count() not count.

First deployment gotcha: SSR hydration fails with Error: Hydration mismatch: Text content does not match server-rendered HTML. Spent 4 hours debugging a dropdown that worked perfectly in dev but wouldn't open in production. Turned out to be a timing issue with async data. The dumb thing to check first: Are you using Date.now() or Math.random() in your render? That'll break hydration every time.

The Bottom Line

SolidJS does what it claims - fast updates, small bundles, React-like DX. The tradeoff is a smaller ecosystem and occasional rough edges. Worth it if performance matters to your users and you don't mind being an early adopter.