Getting started with SolidJs A Beginner's Guide

Solidjs is a javascript library that helps you create 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 be tracking its dependencies, and automatically reruns the function whenever the dependencies update.
• Memos: Memos let you efficiently use a derived value in many reactive computations.

Lets understand with 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.

// Solidconst [getCount, setCount] = createSignal(0);// Reactconst [count, setCount] = useState(0);

NOTE: createSignal is like useState in react. Only difference is that it return 2 function 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.

// SolidcreateEffect(() => {  console.log("count changed", getCount());});// ReactuseEffect(() => {  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 return value of the given function and makes sure that the function only gets executed when its dependencies change.

// Solidconst value = createMemo(() => computeExpensiveValue(a(), b()));// Reactconst 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 Github, Twitter, LinkedIn, Medium, and Stackblitz.