SolidJS Cheat Sheet

A reference for SolidJS signals, effects, memos, and control-flow components for building fine-grained reactive UIs without a virtual DOM.

2 PagesIntermediateMar 15, 2026

Signals, Effects & Memos

The core primitives for fine-grained reactivity.

javascript

import { createSignal, createEffect, createMemo } from 'solid-js';function Counter() {  const [count, setCount] = createSignal(0);  const doubled = createMemo(() => count() * 2);  createEffect(() => {    console.log('count changed to', count());  });  return (    <button onClick={() => setCount(count() + 1)}>      {count()} / {doubled()}    </button>  );}

Control Flow Components

Solid uses components instead of JS operators for conditionals and loops.

javascript

import { Show, For } from 'solid-js';function List(props) {  return (    <Show when={props.items.length > 0} fallback={<p>No items</p>}>      <ul>        <For each={props.items}>          {(item) => <li>{item.name}</li>}        </For>      </ul>    </Show>  );}

Core Concepts

What makes Solid's reactivity model different from React's.

createSignal- returns a getter/setter pair; calling the getter tracks it as a dependency
createEffect- re-runs a function whenever any signal it reads changes
createMemo- caches a derived computation, recalculating only when its dependencies change
<For>- keyed list-rendering component, more efficient than .map() for reactive arrays
<Show>- conditional rendering component with a 'when' prop and optional 'fallback'
createStore- creates a nested reactive store object for more complex state
No virtual DOM- Solid compiles JSX to real DOM update calls, so component functions run once, not on every render

Stores

Fine-grained reactivity for nested objects.

javascript

import { createStore } from 'solid-js/store';const [state, setState] = createStore({ user: { name: 'Ana', age: 30 } });setState('user', 'age', (age) => age + 1); // update a nested fieldconsole.log(state.user.age);

Pro Tip

A Solid component function body runs only once -- reactivity lives inside signals, not re-renders. Never destructure props (const { name } = props), since that reads the value once and breaks reactivity; access them as props.name instead.

Was this cheat sheet helpful?

Nuxt.js Cheat Sheet

Ember.js Cheat Sheet