Solid

date

Jan 1, 2023

type

KnowledgeBase

year

slug

solid

status

Published

Basics

ℹ️

Very similar to React, but much faster! Uses JSX, but has no virtual DOM

Signals

ℹ️

Signals are values that change over time. Similar to state in React.

Notice how count() is a function call! (unlike how you’d do it in React)

Derived Signals

Whenever we access a signal in JSX, it will automatically update the view when that signal changes. But the component function itself only executes once.

A function that accesses a signal is effectively also a signal: when its wrapped signal changes it will in turn update its readers.

doubleCount in the example below is such a derived signal - it doesn’t store a value itself, but gains reactivity from the signal it accesses!

Effects

ℹ️

Effects are observers that can be updated by Signals. Effects automatically subscribe to any signals that are being read during the function’s executions and reruns when any of them change.

Memos

ℹ️

createMemo allows you to cache values in order to reduce duplicate work.

We can use memos to evlauate a function and store the result until its dependencies change. (Great for caching calculations, etc.)

Control Flow

ℹ️

(a ? b : c) and (a && b) work just fine, but Solid has a more readable way too: <Show>

Show

<Show> if basically an if statement. Use the when as the condition and fallback as an else.

For

<For> is the best way to loop over an array of objects. Pass the array to each, then you get a callback with the element as the first argument and the index as the second. (Note: index is a Signal, not a constant number!)

Index

Use <Index> instead of <For> when iterating over primitives (like strings and numbers).

<For> cares about each piece of data in your array, and the position of that data can change; <Index> cares about each index in your array, and the content at each index can change.

Switch and Match

Dynamic

<Dynamic> can be used to render from data. Pass a string or a component function.

It lets us replace this <Switch> statement:

with this:

Full example:

Portal

The <Portal> component’s child content will be inserted at the location of your choosing. (per default in a <div> in document.body.

Error Boundary

<ErrorBoundary>s catch JavaScript errors anywhere in their child component tree, log them and display fallback UI.

Lifecycles

Everything lives and dies by the reactive system.

onMount

onMount is just a createEffect call that is non-tracking (it never re-runs) - will only run once for your component once all initial rendering is done.

onCleanup

You can call onCleanup at any scope and it will run when that scope is triggered to re-evaluate and when it is finally disposed. Use in your components, in your Effects or in your custom directives.

Bindings

Events

Continue here: https://www.solidjs.com/tutorial/bindings_events