This is the most basi way to think about solid: it’s a framework that executes functions that depend on state, and whenever any of the state dependencies change, it will execute the function again.
Solid provides us two kinds of basic primitives for this purpose: signals and computations. A signal is a primitive that holds a piece of state and a computation is a function that depends on one or more signals and will re-execute once any of the signals it depends on change their value.
Some terminology: this dependency relationship has a few different terms that can be used to describe it. The most common way to call this relationship is subscription, i.e. a computation is subscribed to a signal. The terms used in Solid’s source code are observers and sources. When a computation depends on a signal, the computation is an observer of the signal and the signal is a source of the computation. We can also say that the computation is listening to the signal.
We can create signals with:
createSignal<Value>(initialValue: Value): [
getter: () => Value,
setter: (newVal: Value) => void
]
For example:
import { createSignal } from 'solid-js'
const [count, setCount] = createSignal(0)
[**// ↗️ Click to go to playround**](<https://playground.solidjs.com/?hash=-1787457327&version=1.4.1>)
**createSignal** is what we call in Solid a hook, even though it behaves very differently from React hooks. Hooks in Solid are more like normal JS functions, especially createSignal because it doesn’t depend on context at all. No matter where or when you execute it, you will get the same result, which is a new signal.
It accepts a value which will be the initial value assigned to the signal. Then it creates an internal object that represent the signal and holds the current value of the signal. This object is not exposed to us, instead createSignal returns a getter-setter pair, which in this case I named count and setCount.
Similarly to React’s useState, we would usually use a naming scheme of [x, setX] where x is the name we want to give to the signal.
You can think about the internal object created as the actual signal and about the getter and setter as just APIs to interact with it, but when talking about signals people will usually aren’t referring to the internal object. They are usually referring to either the getter, the getter-setter pair, the signal as an entity or even a normal function used for derived state that triggers signal reads indirectly (a pattern we will see later).
The basic usage of the getter and setter is very simple, they are just normal getters and setters:
const [count, setCount] = createSignal(0)
console.log(count()) // => 0
setCount(1)
console.log(count()) // => 1
[**// ↗️ Playround**](<https://playground.solidjs.com/?hash=1852968858&version=1.4.1>)
Note that unlike React, the getter is an actual function and not a plain value.
Effects are a type of computation we use in order to perform side effects reactively. We create them with:
import { createEffect } from 'solid-js'
createEffect(effectCallback: Function): void
For example: