The zen of state in Solid.js
Tags: solidjs, frontend, javascript
Published: 2024-01-24 12:45:15

<small>Cover image from https://www.pxfuel.com/en/free-photo-jsrnn</small>

[Solid.js](https://solidjs.com) is a frontend framework that is known for its superficial similarities and otherwise vast differences to [react](https://react.dev/). One of its best parts is its signals-based state management.


## What are signals?

[Signals](https://www.solidjs.com/docs/latest/api#createsignal) are the simplest unit of state in Solid.js. They consist of two parts: a getter function that gets the current value, and a setter function that allows updating or mutating the value:

```ts
const [value, setValue] = createSignal(0);
```

Behind the scenes, the getter function subscribes effects (`createEffect`) and computations (`createMemo`, JSX fields) that use the value to future updates.

`createSignal` accepts an options object as its second argument. Its `equals` property can contain `false` if every call of the setter, even with the same value, should trigger the subscribers, or a function that returns `true` if the previous and the updated value are equal, which then avoids superfluous calls of the subscribers.

However, this wonderful simplicity comes with the inability to manage partial updates to more complex state in a fine-grained way:

```tsx
const [user, setUser] = createSignal({ id: 123, name: 'User Name' });
createEffect(() => console.log(user().id));
// -> 123
setUser({ id: 123, name: 'Changed Name' });
// -> 123

// splitting up the state:
const [userId, setUserId] = createSignal(123);
const [userName, setUserName] = createSignal('User Name');
```

As you can see, even though `id` has not changed, the update will trigger the effect in the variant with the object. But Solid.js has something else for more complex state; more about that later.

---

> **1st Koan:** Strive for simplicity; split your state where it is sensible; use signals for simple state.

---


## What are stores?

For those cases the state is more complex than a string, for example an array or an object, and could be partially updated, Solid.js provides [stores](https://www.solidjs.com/docs/latest/api#stores).

```ts
const [todos, setTodos] = createStore([]);
```

Unlike signals, `values` in this example is not a function, but a [proxy object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) that can be accessed just like the initial value. Behind the scenes, the proxy creates signals for the properties you access and makes it, so the setter will call those signals that are changed.

The setter works different, too. Instead of merely taking a new value, it can take locations as property names, array indices, or functions that return the desired location inside the current part - and only at the end, either the new value or a function to manipulate the current value:

```ts
const add = (todo) => setTodos(todos.length, todo);
const toggle = (id) => setTodos(id, 'done', done => !done);
```

There are also tools like [produce](https://www.solidjs.com/docs/latest/api#produce) (receives a copy of the store that can be mutated freely) or [reconcile](https://www.solidjs.com/docs/latest/api#reconcile) (takes a new version of the store data and checks recursively for changes) to simplify certain use cases.

---

> **2nd Koan:** Solve complexity that cannot be simplified; use stores for fine-grained updates.

---


### How can I remove an item out of an array inside a store (in the most performant way)?

The most performant way is to avoid removing the item and instead set it to undefined and ignore it in the subsequent iteration using `<Show>`.

```ts
setValues(pos, undefined);
```

However, arrays in JS have a maximum number of 2³²-2 elements, so if you have a lot of frequent changes in that array and thus are in danger of hitting that limit, you should check the length and clean up periodically using `produce` and `Array.prototype.filter`:

```ts
if (values.length > 4e9)
  setValues(produce(v => v.filter(Boolean)));
```

Otherwise, use the following to remove the item:

```ts
// if you know the position
setValues(produce(v => v.splice(pos, 1)));
// if you only know the item reference
setValues(reconcile(values.filter(i => i === item)));
```


### How can I handle Maps and Sets in Solid?

Use the community packages [@solid-primitives/map](https://solid-primitives.netlify.app/package/map) and [@solid-primitives/set](https://solid-primitives.netlify.app/package/set) to get a map or set that is reactive on its primary level - its items are not fine-grained reactive, but you could wrap them in `createMutable` (see "What are mutables?").


### How can I subscribe to every update of a store?

There are two ways. The simple one is to wrap the setter so that every call triggers whatever is required on any update.

If you do not control the setter, you must recursively subscribe to every single property inside the store, e.g. using the [`trackDeep` primitive](https://primitives.solidjs.community/package/deep) from our community's solid-primitives project.

---

> **3rd Koan:** Find another angle to deal with complexity; what may be obscured for you might be obvious to [others (e.g. on the Solid.js Discord)](https://discord.com/invite/solidjs).

---


## What are mutables?

While stores have a setter function that allows changing multiple properties in a single call, there are cases where you want a fine-grained reactive object that you need to be written to, like refs in Vue.

In those cases, use [`createMutable`](https://www.solidjs.com/docs/latest/api#createmutable), otherwise it might be better to avoid it, since it hides its reactivity, which can lead to confusion that can cause issues.

One reasonable use for mutables is to make class instances reactive:

```ts
class MyClass {
  constructor() {
    return createMutable(this);
  }
}
```

If you want to update mutables in the same way that stores are updated, Solid.js provides [`modifyMutable`](https://www.solidjs.com/docs/latest/api#modifymutable) to do exactly that.

---

> **4th Koan:** Prefer visible reactivity over invisible one; use mutables only when it is necessary.

---


## What are memos?

In Solid.js, you can derive state using simple functions: you can take state and create a different state out of it or combine multiple states into a new one. However, effects that are subscribed to the derived state will re-run on any changes to the original state that the derived state depends on, even if the return value of the derived state will be the same.

Solid.js can avoid having to needlessly run effects by keeping the results of the derived state in memory. By wrapping your derived state in [`createMemo`](https://www.solidjs.com/docs/latest/api#creatememo), you get a reactivity filter which will only cause effects to re-run if the return value of the resulting "memo" changes.

```ts
const [num, setNum] = createSignal(1);
const halfNoMemo = () => Math.floor(num() / 2);
const halfMemo = createMemo(halfNoMemo); 

createEffect(() => console.log('no memo', halfNoMemo()));
createEffect(() => console.log('memo', halfMemo()));

// no memo: 0, memo: 0
setTimeout(() => setNum(2), 100);
// no memo: 1, memo: 1
setTimeout(() => setNum(3), 200);
// no memo: 1
```

---

> **5th Koan:** Use memos as a reactivity filter when you face performance issues; avoid premature optimization.

---


## What are effects?

Effects are changes caused by state updates. This may be an HTML attribute changed by setting the state of a signal used in a JSX property (JSX properties in Solid.js, unless static, are transpiled into effects). It can also be something a function inside `createEffect` causes, like the console.log in the previous examples.

Effects will re-run whenever the state it uses change, unless it is [`untrack`ed](https://www.solidjs.com/docs/latest/api#untrack) and thus marked not to run on updates. If you need a state only once, you can `untrack` it.

Solid.js provides [`onMount`](https://www.solidjs.com/docs/latest/api#onmount) and [`onCleanup`](https://www.solidjs.com/docs/latest/api#oncleanup) that allow you to run effects only once, at the start or on the disposal of a component. 

While you can change state within effects, you should be aware that this can cause infinite loops and thus performance issues. If you need to handle asynchronous state, better use a resource. The next section will show you how to do that.

---

> **6th Koan:** Minimize and separate state usage in effects; avoid manipulating state in effects.

---


## What are resources?

In Solid.js, [resources](https://www.solidjs.com/docs/latest/api#createresource) are a way to handle asynchronous state. It can either be single-use or repeatedly updated.

```ts
// single-use
const [data] = createResource(fetcher);

// repeated updates
const [data] = createResource(sourceGetter, fetcher);
```

The fetcher will only be called if data is ever used and the value stored in `sourceGetter` is truthy. If `data()` is used and the fetcher throws an error, the error will be relayed to the next `<ErrorBoundary>`, so unless you want that, guard uses of `data()` with `data.error`.

`<Suspense>` will track resources inside it and show a fallback until those are resolved. That doesn't mean a component inside may not be evaluated, so you should make sure you do not rely on data() containing anything meaningful.

---

> **7th Koan:** For asynchronous state, use resources; wrap components depending on such state in `<Suspense>`.

---


### How can I run an asynchronous effect before cleanup?

For a task like this, you should probably use something like the [transition group primitive](https://primitives.solidjs.community/package/transition-group).


## A few words

Code on and enjoy the elegance and simplicity that comes naturally with building your state with Solid.js, dear reader. I hope you enjoyed your stay here.