Getting started with SolidJs – A Beginner's Guide

Solidjs is a javascript library that helps you create the user interface, Instead of using a Virtual DOM, It uses reactive programming under the hood to update the DOM.

Key Features

• Fine-grained updates to the real DOM
• Render-once mental model: your components are regular JavaScript functions that run once to set up your view
• Automatic dependency tracking: accessing your reactive state subscribes to it
• Provides modern framework features like JSX, fragments, Context, Portals, Suspense, streaming SSR, progressive hydration, Error Boundaries and concurrent rendering.
• Web component friendly and can author custom elements

There are two main types of building blocks Components and Reactive Primitives.

1. Components: A component is a function that accepts props(input) as an argument and returns a JSX element.

const Hello = (props) => {
  return <h1>Hello {props.name}</h1>;
};

<Hello name="John" />;

2. Reactive Primitives: A reactive primitive is a value that can be observed and ensures your view stays up to date. There are three core primitives: Signals, Memos, and Effects.

• Signals: Signals are the building blocks of reactive programming. They track the value change over time.
• Effects: Effects are used to perform side effects. They are used to check any dependencies changes. Unlike react you don't need to pass dependencies manually. Solid will automatically track its dependencies and automatically reruns the function whenever the dependencies update.
• Memos: Memos let you efficiently use a derived value in many reactive computations.

Let's understand with a simple example.

import { render } from "solid-js/web";
import { createSignal, createEffect, createMemo } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(0);
  const increment = () => setCount((c) => c + 1);

  createEffect(() => {
    console.log("Count Changed", count());
  });

  const value = createMemo(() => count() * count());
  console.log("Value", value());

  return (
    <div>
      <h1>{count()}</h1>
      <button type="button" onClick={increment}>
        Increment
      </button>
    </div>
  );
}

render(() => <Counter />, document.getElementById("app")!);

• createSignal: It returns a signal and a function to update the signal.

// Solid
const [getCount, setCount] = createSignal(0);

// React
const [count, setCount] = useState(0);

NOTE: createSignal is like useState in react. The only difference is that it returns 2 functions getter and setter.

• createEffect: It accepts a function that will be called when the signal changes. Without any dependencies, it will be called every time the signal changes.

// Solid
createEffect(() => {
  console.log("count changed", getCount());
});

// React
useEffect(() => {
  console.log("count changed", count);
}, [count]);

NOTE: createEffect is like useEffect in react. Does not require any dependencies array.

• createMemo: createMemo creates a read-only reactive value equal to the given function's return value and ensures that the function only gets executed when its dependencies change.

// Solid
const value = createMemo(() => computeExpensiveValue(a(), b()));

// React
const value = useMemo(() => computeExpensiveValue(a(), b()), [a, b]);

NOTE: createMemo is like useMemo in react. Does not require any dependencies array.

Try solid online

Getting started with Solid is to try it online, https://playground.solidjs.com is the easy way to try out ideas.

Local setup:

> npx degit solidjs/templates/ts counter-app
> cd counter-app
> npm i
> npm run dev

Thank you for reading 😊

Got any questions or additional? please leave a comment.

Must Read If you haven't

React best practices and patterns to reduce code

3 steps to create custom state management library with React and Context API

How to cancel Javascript API request with AbortController

13 Typescript Utility: A Cheat Sheet for Developer

More content at Dev.to.

Catch me on YouTube, Github, Twitter, LinkedIn, Medium, Stackblitz, Hashnode, HackerNoon, and Blogspot.