Solid Cheat Sheet - APIs

In Solid.js, state is tracked inside a reactive root, which registers function calls (even if through a store getter). Effects and memos are later re-evaluated when state is updated. This allows a very precise control of reactivity.

It also means that evaluating reactive state outside of the reactive root, i.e. by destructuring store objects, will result in a loss of reactivity.
Guide

tsx
const [getter, setter] = createSignal(initialValue)
getter() // reads and tracks the value if inside reactive root
setter(value) // overwrites the value and triggers state updates

The initial value is optional, createSignal can be typed in TypeScript with a generic.
Docs

tsx
const getter = createMemo((lastValue) => memoizedValue)
getter() // reads and tracks the derived value if inside reactive root

Derived memoized state allows you to reduce the times your effects run due to changes.
Docs

tsx
const [resource, { mutate, refetch }] =
  createResource(fetcher, options)
// or
const [resource, { mutate, refetch }] =
  createResource(source, fetcher, options)

fetcher() is a function that receives the output of source(), if given, and returns a Promise that resolves to the value of the resource(), which also contains the properties loading (boolean) and error (Error | undefined). mutate(value) allows overwriting the value and refetch() will re-run the last call of fetcher().
Docs

tsx
const [store, setStore] = createStore(initialValue)
store.nested.prop // is a getter that will be tracked
setStore('nested', 'prop', value)
setStore('list', [2], value)

Creates a reactive store, an object that tracks read access to all (sub-)properties and a versatile setter function to allow fine-grained manipulation.
Docs

tsx
setStore('todos', reconcile(todos))

Allows direct manipulation of the store object like in Immer.
Docs

tsx
setStore('todos', reconcile(todos))

Diffs store with another immutable version, e.g. from a large API response
Docs

tsx
const unwrappedStore = unwrap(store)

Gets the data out of a store so it is no longer reactive or connected to the setter.
Docs

Wraps a store into a proxy with reactive setters, so you can use it like in MobX/Vue.
Docs

In Solid.js, everything caused by updates inside the reactive system - DOM modifications, calling external libraries and so on - is managed inside effects.

tsx
createEffect((previous) => {
  return setValue(otherValue())
})

Runs a reactive side effect initially and then whenever a tracked state changes after rendering.
Docs

tsx
onMount(() => ref.setAttribute(value()))

Runs a side effect only once on mount, regardless of signals used, like an untracked createEffect.
Docs

tsx
onCleanup(() => connection.close())

Runs a side effect on unmount (or dispose() call of a reactive root created through createRoot()).
Docs

tsx
onError(() => connection.retry())

Runs a side effect on any error thrown within the reactive root. The effect callback will receive the error as argument.
Docs

Creates a new signal from an input signal that is deferred until all other side effects are run or an optional timeout is reached.
Docs

Runs a side effect like createEffect(), but before instead of after rendering.
Docs

Like createEffect(), but is called while rendering.
Docs

tsx
const track = createReaction(() => { ... })
track(() => signal())

Creates an effect that has an external tracking part.
Docs

tsx
const isSelected = createSelector(selectedId)

Creates a conditional signal that only notifies subscribers when entering or exiting their key matching the value.
Docs

Solid.js comes with a collection of tools to put you in control of what state is tracked when and from where.

tsx
createEffect(() => console.log(untrack(a()))

Reads the signal a() without the effect being subscribed to changes, while still tracking everything else.
Docs

tsx
createEffect(() => batch(() =>setB(setA(value))))

Without batch(), the signal a() would have been updated and only then the signal b(), but using it ensures, that the notification of tracking effects are deferred until both are ready.
Docs

tsx
createEffect(on(a, (a) => console.log(a, b()))

The first argument is either an array of signal accessors or a single signal accessor to be tracked, the second is a function that receives the value(s) of these tracked signals and won't track any signal inside. It's basically the opposite of untrack().
Docs

tsx
const [pending, start] = useTransition()
start(() => setSignal(newValue))

Batches asynchronous updates in a transaction deferring commit until all processes under the same Suspense boundaries are complete. start(...) returns a Promise that resolves on completion.
Docs

tsx
startTransition(() => setSignal(newValue))

Like useTransition, just without the pending accessor.
Docs

tsx
import { from } from "rxjs"
const [value, setValue] = createSignal(0)
from(observable(value)).subscribe(...)

Creates an observable from a signal to be consumed by any observable library like rxjs.
Docs

tsx
const rxValue = from(observable$)

Creates a reactive accessor from rxjs type observables (or anything else with a subscribe method, like a svelte store), only subscribing if the signal is tracked and unsubscribing when its tracking scope is disposed.
Docs

Solid.js uses a reactive scope to track the use of reactive state. Every use of a reactive state inside the scope is done through a function call, which registers effects to re-run on updates. Asynchronous calls like Promise or Event break out of the reactive scope, so Solid.js comes with tools to handle the scope itself.

tsx
const dispose = createRoot((dispose) => {
  createEffect(...)
  return dispose
})

Creates a reactive scope that can manually unsubscribe all effects through its dispose handler and will return the return value of the scope. Effects will not be able to track signals and stores.

Functions like render() automatically create their reactive scope, but you can still use createRoot() inside it to gain manual disposal for your reactive effects.
Docs

tsx
const scope = getOwner()
return <div onClick={(ev) =>
  runWithOwner(scope, () => props.onClick(ev))}
/>

Gets the reactive scope that tracks effects either in order to test its existence or to run effects inside it outside of the current function (e.g. in timeouts or events) by using runWithOwner().
Docs

tsx
const scope = getOwner()
return <div onClick={(ev) =>
  runWithOwner(scope, () => props.onClick(ev))}
/>

Runs a callback inside the scope of a reactive root obtained through getOwner(), for example to run it inside a timeout or event.
Docs

Since reactive data like props are often handled by object getters or proxies, destructuring them outside of an effect will break reactivity. Solid.js brings tools to handle them without losing reactivity.

tsx
const p = mergeProps(defaults, props)

Shallowly merges all reactive objects together, retaining their reactivity (you can add as many objects as you like).
Docs

tsx
const [local, rest] = splitProps(props, ["children"])
<div {...rest}><span>{local.children}</span></div>

Splits a reactive object into multiple objects while retaining the reactivity of the properties.
Docs

maps a reactive array, retaining the reactive properties of the items; otherwise similar to mapArray. Is used by the <For> flow control.
Docs

maps a reactive array, retaining the reactive properties of the indices; items are cached by reference, while the index argument is a signal. The map function itself is not tracking. Is used by the <Index> flow control.
Docs

Solid.js comes with a few helpers to manage components internally.

tsx
const context = createContext(defaultValue)
const Consumer = (props) => {
 const contextValue = useContext(context)
}
<context.Provider><Consumer /></context.Provider/>

Creates a context object with a provider component to inject dependencies bound to the view to be used with useContext(). The default value is optional.
Docs

tsx
const context = createContext(defaultValue)
const Consumer = (props) => {
 const contextValue = useContext(context)
}
<context.Provider><Consumer /></context.Provider/>

Gets the (default) value of the nearest context provider created with createContext() from the given context object.
Docs

tsx
const childs = children(() => props.children)

Helper that automatically unwraps children (or other reactive values) that are function elements and memoizes the result in an accessor.
Docs

tsx
const AsyncComponent =
  lazy(import('./AsyncComponent'))
return <Suspense fallback="...Loading">
  <AsyncComponent />
</Suspense>

Creates a component from a Promise that can be tracked and replaced with a fallback until resolved in <Suspense>.
Docs

tsx
const componentId = createUniqueId()

Creates a unique ID that is stable across server and browser to enable synchronization of server-rendered templates in client-side hydration.
Docs

Solid.js is very flexible when it comes to rendering both on the server and the client.

tsx
render(() => <App />, document.getElementById("root"))

Browser-only method to add a component to a mount point inside its own reactive root.
Docs

tsx
hydrate(() => <App />, document.getElementById("root"))

Browser-only method to add client-side logic (e.g. event handlers) to server-rendered code.
Docs

tsx
const html = renderToString(() => <App />)

Creates a static HTML string from a component to be sent to the client and be hydrated using hydrate().
Docs

tsx
const html = await renderToStringAsync(() => <App />)

Creates a static HTML string from a component to be sent to the client and be hydrated using hydrate(), but attempts to resolve all async components and resolve all resources.
Docs

tsx
renderToStream(() => <App />).pipe(res)

Rendering the component asynchronously as string into a stream to be hydrated on the client using hydrate(); initial data contains suspense fallback placeholders and everything else will come in once it resolves.
Docs

is true on the server and false in the browser; helpful for tree-shaking.
Docs

Generates hydration script as string to be used on the server.
Docs

Generates hydration script as a JSX.Component to be used in the client.
Docs

JSX elements receive attributes separately or with a spread operator:

tsx
<Element {...props} />

Solid uses a babel plugin to transform JSX to efficient rendering through cloning templates; updates are just side effects within Solid's reactive system.
Guide

tsx
let ref!: HTMLDivElement
<div ref={ref} />
// or
let [ref, setRef] = createSignal<HTMLDivElement>()
<div ref={setRef} />

A reference to DOM arrays for intrinsic elements and whatever reference components return (or not). Can be used with a let variable or a setter-style function (or any other function receiving the reference).
Docs

tsx
<div classList={{ xl: size() === 'xl', box: true }} />

Preferred method of setting and toggling multiple class names using an object with the keys being the class names, and the values being truthy or falsy toggling them. Beware that there might be side effects if using class and classList at the same time.
Docs

tsx
<div style="color: red;" />
<div style={{ color: 'red '}} />

Attribute to set inline styles and CSS variables, either as a string or from an object.
Docs

Set the HTML content (Warning: overwrites child nodes and can lead to security issues if the content is not completely controlled).
Docs

Replace the content with a text node containing the given text (Warning: may overwrite child nodes)
Docs

Delegated event listeners (using event.currentTarget instead of event.target), only bound once.
Docs

tsx
import { JSX } from "solid-js"
declare module "solid-js" {
  namespace JSX {
    interface CustomEvents {
      MyEvent: Event
    }
  }
}
<div on:MyEvent={handler} />

Native event listener (for typescript, this requires extending the JSX namespace, as shown above)
Docs

tsx
import { JSX } from "solid-js"
declare module "solid-js" {
  namespace JSX {
    interface CustomCaptureEvents {
      MyEvent: Event
    }
  }
}
<div oncapture:MyEvent={handler} />

Native event listener with capturing (for typescript, this requires extending the JSX namespace, as shown above)
Docs

tsx
import { JSX } from "solid-js"
declare module "solid-js" {
  namespace JSX {
    interface Directives {
      clickOutside: [() => void]
    }
  }
}
<div use:clickOutside={handler} />

Directives are functions that receives the node of the intrinsic element as first and their property as second argument, allowing for elegant code reuse (for typescript, this requires extending the JSX namespace)
Docs

tsx
import { JSX } from "solid-js"
declare module "solid-js" {
  namespace JSX {
    interface ExplicitProperties {
      property: string
    }
  }
}
<div prop:property="foobar" />

Will set the property as property of the intrinsic element instead of an attribute.
Docs

tsx
import { JSX } from "solid-js"
declare module "solid-js" {
  namespace JSX {
    interface ExplicitAttributes {
      attribute: number
    }
  }
}
<div attr:attribute={2} />

Will set the property as attribute of the intrinsic element instead of a property.
Docs

tsx
<Component prop={/*@once*/prop.foo} />

Will make sure prop.foo will not be tracked by not converting the assignment to an effect, which is more efficient than untrack.
Docs

Children in Solid are typically HTML elements, an array of HTML elements, server rendered elements (Objects with { t: template-string }), strings (TextNodes), false, null or a function returning any of the aforementioned.

Solid comes with control flow components that allow you to express conditional and iterative rendering directly within the JSX.

tsx
<Show
  when={condition()}
  fallback={<div>Fallback</div>}
>
  <Content />
</Show>

Renders the children if the condition returns a truthy value, otherwise renders the optional fallback (or nothing as a default).
Docs

tsx
<Switch fallback={<div>Fallback</div>}>
  <Match when={conditionA()}><PartA /></Match>
  <Match when={conditionB()}><PartB /></Match>
</Switch>

Like a switch-Statement, but as a control flow component and with fallback prop instead of a default case.
Docs

tsx

Will track array items by reference over changing positions; if you expect more changes of positions than changes of content, use <For>, otherwise consider using <Index>.
Docs

tsx

Will track array items by content; if you expect content to change rather than changing positions, use <Index>, otherwise consider using <For>.
Docs

tsx
<Dynamic
  component={loggedIn() ? App : Login}
  user={user()}
/>

Returns a component of a variable type, use strings for intrinsic elements or functions for components.
Docs

tsx

Switch the mount point for the children.
Docs

tsx

Catches errors for the childrens, present a fallback and allows handling the errors and reset the state.
Docs

tsx

Shows an optional fallback until the resource promises inside the component (from createResource or lazy) are resolved.
Docs

tsx

Experimental; allows defining the order in which suspended parts of the layout are replaced with the loaded content in order to avoid layout thrashing.
Docs