Posted inDevelopment

Getting Started with Solid.js: The Blazing Fast JS Framework Without Virtual DOM

Development tutorial - IT technology blog
Development tutorial - IT technology blog

Getting Started with Solid.js in 5 Minutes

If you’ve worked with React, you’ll find Solid.js extremely familiar thanks to its JSX syntax. However, don’t let looks deceive you. The real secret lies under the hood. To start, use the official Vite template to save setup time, perhaps alongside Biome to further speed up your project development.

# Initialize project
npx degit solidjs/templates/ts my-solid-app

# Navigate and install
cd my-solid-app
npm install

# Start
npm run dev

After accessing localhost:3000, try replacing the content of the App.tsx file with the Counter code snippet below:

import { createSignal } from "solid-js";

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

  return (
    <button onClick={() => setCount(count() + 1)}>
      Click count: {count()}
    </button>
  );
}

export default Counter;

Important Note: count here is a function (getter). You must call count() to retrieve the value instead of using the variable directly. This is how Solid precisely tracks where updates are needed in the UI without guessing.

Decoding Speed: Why Does Solid.js Outperform React?

A common pain point for React developers is having to use useMemo or useCallback to prevent unnecessary re-renders. Solid.js completely eliminates the Virtual DOM to solve this problem once and for all.

The Power of “Fine-grained Reactivity”

In React, whenever state changes, the entire component and its sub-tree are re-scanned (re-rendered). It then uses the Virtual DOM for diffing before updating the real DOM. This process is extremely CPU-intensive as the application grows, similar to the performance bottlenecks solved by Web Workers when handling heavy tasks.

Solid.js takes a different approach: it compiles JSX into direct DOM update commands. When count() changes, only the specific text node containing that number is updated. The Counter component runs **exactly once** during initialization. Performance here is nearly identical to Vanilla JS, matching the high standards set by Astro.js and its Islands Architecture.

In fact, when I refactored a dashboard displaying 200 real-time charts from React to Solid, CPU usage dropped from 40% to under 10%. The UI remained smooth even on low-spec office machines.

The Three Core Pillars of Solid.js

1. Signals – The Heart of the System

createSignal is the most basic unit, returning a [getter, setter] pair. This separation allows Solid to know exactly which piece of code is “subscribed” to the data.

const [name, setName] = createSignal("Hands-on Dev");
console.log(name()); // Read value
setName("High-speed SolidJS"); // Update

2. Effects – Automating Actions

Use createEffect when you want to run side effects (like API calls) whenever a signal changes, which is particularly useful when you simulate APIs for the frontend during development. Unlike useEffect, you don’t need a dependency array. Solid is smart enough to automatically detect which signals are being used inside.

createEffect(() => {
  console.log("New value:", name());
});

3. Memos – Intelligent Caching

If you have a complex calculation based on other signals, use createMemo. It helps avoid unnecessary recalculations, optimizing system resources.

Control Flows

Since components only run once, standard .map() loops or if/else statements won’t achieve maximum performance. Instead, use Solid’s specialized components:

  • <For>: Optimized for rendering lists, preserving old DOM nodes to prevent lag.
  • <Show>: A replacement for the ternary operator ? :.
  • <Switch> / <Match>: Handles multi-condition logic cleanly.
<For each={users()}>
  {(user) => <li>{user.name}</li>}
</For>

Real-world Tips to Avoid Pitfalls

Say No to Destructuring Props

This is a classic mistake for React developers. When you write const { name } = props, you accidentally break reactivity. Always access props directly via props.name so Solid can maintain the connection to the source data.

Ultra-lightweight Global State Management

Forget the cumbersome Context API or Redux. With Solid, you just create a signal in a separate file and export it. Any component that imports it will receive synchronous updates. Solid’s bundle size is only about 7KB, whereas React plus state management libraries can reach 50-60KB.

Conclusion: When Should You Switch to Solid.js?

While React still has a massive ecosystem, and HTMX provides a different path for dynamic apps, Solid.js is the top choice if you prioritize:

  1. Absolute speed: Handling large datasets or real-time dashboards.
  2. Ultra-lightweight apps: Embedded widgets or web apps running on weak IoT/Mobile devices.
  3. Developer experience: Wanting to escape the mess of re-renders and dependency arrays in React Hooks.

With just an afternoon of learning, you’ll see that Solid.js truly brings us closer to the nature of the browser than ever before.

Share:
Tags: