Building a Blazing-Fast App with SolidJS: A React Developer’s Perspective

Introduction

When I first heard about SolidJS, I was a die-hard React fan. "Why switch?" I thought. "React works just fine!" But after building a small app with SolidJS, I was shocked, no Virtual DOM, no unnecessary re-renders, and a bundle size so small it felt like cheating.

Turns out, SolidJS isn’t just another React alternative; it’s a reactive JavaScript library that takes the best parts of React (like JSX and hooks) and strips away the overhead. The result? Near-instant updates, simpler code, and performance that feels like magic.

In this post, I’ll walk you through:

1. Building a simple SolidJS app (and how it compares to React).

2. Key differences (why SolidJS might be faster than React).

3. When (and when not) to use SolidJS over React.

By the end, you’ll see why developers are calling SolidJS "React but faster and simpler." Let’s dive in!

1. Setting Up a SolidJS Project

No create-react-app Here!

Unlike React, SolidJS doesn’t rely on Webpack or a heavy toolchain. Instead, it uses Vite, a lightning-fast build tool.

To create a new project:

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

For typescript:

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

⚡ Key Differences from React:

• Vite over Webpack/CRA: Instant hot module reloading (HMR).

• Smaller boilerplate: No React.StrictModeNo unnecessary wrappers.

2. Building a Counter App (React vs. SolidJS)

React Version

import { useState } from 'react';

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

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

SolidJS Version:

import { createSignal } from 'solid-js';

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

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

Wait… Why count() Instead of count?

This is where SolidJS’s reactivity model shines:

• In React, useState triggers a re-render of the whole component.

• In SolidJS, createSignal creates a fine-grained reactive value.

  • Only the text node ({count()}) updates, no re-renders!

  • This leads to better performance (especially in large apps).

3. Key Differences Between SolidJS and React

1. Reactivity: Signals vs. State

2. No Virtual DOM

• React: Uses a Virtual DOM to diff changes before updating the real DOM.

• SolidJS: Compiles away reactivity at build time, updating the DOM directly.

  • This means zero overhead; what you write is what runs.

3. Smaller Bundle Size

• React + ReactDOM: ~40KB (min+gzip).

• SolidJS: ~7KB (almost 6x smaller!).

4. No "Hooks Rules"

• In React, you can’t conditionally call hooks (useState, useEffect).

• In SolidJS, you can put createSignal anywhere, no restrictions.

4. Fetching Data: SolidJS vs. React

React (with useEffect)

import { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/users')
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);

  return <ul>{users.map(user => <li>{user.name}</li>)}</ul>;
}

SolidJS (with createResource)

import { createResource } from 'solid-js';

function UserList() {
  const [users] = createResource(async () => {
    const res = await fetch('https://api.example.com/users');
    return res.json();
  });

  return (
    <ul>
      {users()?.map(user => <li>{user.name}</li>)}
    </ul>
  );
}

Why This Matters:

• SolidJS’s createResource handles loading/error states automatically.

• No need for useEffectJust write async code directly.

---

5. When Should You Use SolidJS Over React?

✅ Use SolidJS if:

• You want insane performance (e.g., data-heavy dashboards, real-time apps).

• You hate unnecessary re-renders in React.

• You prefer a smaller bundle size (better for low-power devices).

❌ Stick with React if:

• You rely on React’s ecosystem (Next.js, Redux, Material UI).

• Your team already knows React well.

---

Conclusion: Is SolidJS the Future?

After using SolidJS, I can’t unsee its advantages:

• Faster updates (no Virtual DOM overhead).

• Simpler mental model (just signals and JSX).

• Tiny bundle size (perfect for performance-critical apps).

That said, React still wins in ecosystem and adoption. But if you’re building a new project and want raw speed without complexity, SolidJS is worth a serious look.

Try It Yourself!

• Official SolidJS Tutorial

• SolidJS Playground

What do you think? Have you tried SolidJS? Would you switch from React? Let me know in the comments!