# Solid 2.0 — Cheatsheet
One-page reference for Solid 2.0. Every API exists in `solid-js` unless noted. DOM APIs are in `@solidjs/web`.
> **AI codegen warning.** Solid is **not React**, and 2.0 is **not 1.x**. Both priors are dominant bug sources here — distrust pattern-matching from either. The bottom of this file lists 2.0-specific corrections; read them before generating code.
---
## Imports
```ts
import {
createSignal,
createMemo,
createEffect,
createRoot,
For,
Show,
Switch,
Match,
Loading,
Errored,
Repeat,
Reveal,
createStore,
createProjection,
snapshot,
reconcile,
merge,
omit,
action,
createOptimistic,
createOptimisticStore,
isPending,
latest,
createDeferred,
from,
refresh,
affects,
untrack,
flush,
onSettled,
onFlush,
createContext,
useContext,
children,
lazy,
createUniqueId
} from "solid-js";
import { render, hydrate, Portal, dynamic, Dynamic } from "@solidjs/web";
```
Web projects should configure TypeScript with `"jsxImportSource": "@solidjs/web"`.
`solid-js` no longer provides `solid-js/jsx-runtime`; renderer packages own JSX types.
Old subpaths are gone:
`solid-js/web` → `@solidjs/web`. `solid-js/store` → `solid-js`. `solid-js/h` → `@solidjs/h`. `solid-js/html` → `@solidjs/html`. `solid-js/universal` → `@solidjs/universal`.
---
## Signals & memos
```ts
// Plain signal
const [count, setCount] = createSignal(0);
count(); // read (call it!)
setCount(1); // queues; read returns last committed until flush
setCount(c => c + 1); // updater form
// Readonly derived
const doubled = createMemo(() => count() * 2);
doubled();
// Writable derived ("writable memo")
const [value, setValue] = createSignal(() => props.initial);
// Options
createSignal(0, { ownedWrite: true }); // allow writes from inside owned scope
createSignal(0, { unobserved: () => cleanup() }); // fires when no subscribers
createMemo(fn, { lazy: true }); // defer first compute until read; autodispose when unobserved
createMemo(fn, { equals: (a, b) => a.id === b.id });
```
**Reads update only after flush.** `setX(v); x()` returns the _previous_ value until the next microtask or `flush()`.
```ts
setCount(1);
count(); // still 0
flush();
count(); // 1
```
---
## Effects
```ts
// Two-arg form is the only form. Compute tracks; apply runs side effects.
createEffect(
() => count(), // compute (tracks)
(value, prev) => {
// apply (untracked)
el.title = value;
return () => {
/* cleanup */
}; // optional cleanup
}
);
// With error handling
createEffect(() => fetchData(id()), {
effect: data => render(data),
error: (err, cleanup) => console.error(err)
});
// Effects never compare: apply (and the previous cleanup) runs every time
// compute re-runs, even if it returned an equal value. To skip unchanged
// values, read a memo in compute; its `equals` (default ===) stops the re-run.
const active = createMemo(() => status() === "active");
createEffect(
() => active(),
isActive => {
/* runs only when `active` flips */
}
);
// Run on next change only (skip initial)
createEffect(
() => count(),
v => log(v),
{ defer: true }
);
// Schedule once after the current activity settles — the canonical
// "do this once and clean it up on dispose" primitive (replaces 1.x
// onMount + onCleanup for component-level lifecycle).
onSettled(() => {
const id = setInterval(tick, 1000);
return () => clearInterval(id);
});
```
`onSettled` works in component bodies (after first reactive settle) **and** in event handlers (defer work until the triggered transition settles).
```ts
// Keep a write out of another update's hold: runs once right after the
// pending flush, never waits on async. For event handlers and effect
// callbacks (dev warns ON_FLUSH_IN_OWNED_SCOPE in a body or computation).
const select = (id: string) => {
onFlush(() => setOpen(false)); // closes now even if onSelect navigates
props.onSelect?.(id);
};
```
For component-level setup-and-teardown, **use `onSettled` with a returned cleanup, not `onCleanup` directly** — `onCleanup` is reserved for reactive cleanup inside computations (see Advanced).
---
## Reactive control utilities
```ts
untrack(() => count()); // read without subscribing
flush(); // drain queued updates synchronously
isEqual(a, b); // default equality
```
---
## Stores
```ts
const [store, setStore] = createStore({ user: { name: "A" }, list: [] });
// Draft-first setter (canonical)
setStore(s => {
s.user.name = "B";
s.list.push("x");
});
// Return a value when mutation is awkward (filter/remove most often).
// Arrays replace by index + length; objects shallow-diff at the top level.
// No keyed reconciliation here — for that, use createProjection / createStore(fn).
setStore(s => s.list.filter(x => x !== "x"));
setStore(s => ({ ...s, list: [] }));
// Reconcile new data into a sub-tree (preserve identity)
setStore(s => {
reconcile(serverTodos, "id")(s.todos);
});
// Derived stores (mirror signal/memo split)
const items = createProjection(async () => api.list(), [], { key: "id" }); // readonly
const [cache, setCache] = createStore(
draft => {
draft.x = compute();
},
{ x: 0 }
); // writable
```
`undefined` is a real value in `merge` / setters — it overrides, not "skip".
---
## Props
**Props are reactive values, not accessors.** Two rules, one underlying model — and together the most common AI-generated bug class in Solid.
```jsx
const [count, setCount] = createSignal(0);
// 1. At the call site: pass the VALUE. Call accessors at the JSX boundary.
// ✅
// ❌ child receives a function, not a number
// 2. In the child: read via `props.x`. The *property access* is what tracks.
function Counter(props) {
return
{props.value}
; // ✅ re-reads on each render
}
function Counter({ value }) { // ❌ destructure unwraps once, reactivity is dead
return
{value}
;
}
```
The rules are two sides of the same boundary: the parent collapses its accessors to values when handing off; the JSX runtime re-wraps `props` so that `props.value` re-reads on each access. Skip step 1 and the child gets a function; skip step 2 and the child reads once.
If you genuinely need to forward a getter (rare — render props, lazy slots), pass `getValue={() => count()}` and document it. Default to values.
### Helpers
```ts
const merged = merge(defaults, props, overrides); // replaces mergeProps
const rest = omit(props, "class", "style"); // replaces splitProps
```
---
## Async
```ts
// Async is just "any computation that returns a Promise / AsyncIterable"
const user = createMemo(() => fetchUser(id()));
// Reading user() is not ready at first; wrap in .
// True while a value CHANGE is in flight for this read (e.g. id() changed and
// the refetch hasn't landed). Place under the Loading boundary that owns it.
}>{isPending(() => user()) ? "Updating..." : user()};
// isPending can live outside Loading when it only reads upstream state that cannot be not ready.
// Peek at the in-flight value during a transition
latest(id);
// A memo that may lag but never leads (React's useDeferredValue): after its
// first answer, a refetch keeps the last value on screen instead of holding
// the change; isPending(() => rows()) reports the refetch.
const rows = createDeferred(() => fetchRows(period()));
// External push source -> memo: from() takes a subscribe fn
// ((next, error, complete) => unsubscribe), an Observable (RxJS, Symbol.observable)
// or an AsyncIterable (streamed as is). A subscription keeps the latest value;
// a re-run or disposal closes the source at once. Transform in a downstream
// memo, not in a for-await body; if you must for-await a stream inside an
// async compute, wrap it in from() so a re-run stops it. SSR: a subscription
// renders its first value, then the client resubscribes after hydration.
const price = createMemo(() => from(ticker(symbol())));
const label = createMemo(() => format(price()));
// Force recompute of a derived read after a server write.
// Action: call from handlers/effects/actions, not pure reads.
// A bare refresh() re-asks the SAME question — it is quiet (isPending stays
// false; the fresh value reveals silently). To make a reload read as pending,
// declare it:
affects(user);
refresh(user);
```
---
## Actions & optimistic
```ts
const [todos, setOptimisticTodos] = createOptimisticStore(() => api.list(), []);
const addTodo = action(function* (todo) {
setOptimisticTodos(s => {
s.push(todo);
}); // optimistic write — shows the expected value; never reads as pending itself
yield api.add(todo); // async work
refresh(todos); // reconcile with source of truth (quiet — same question)
});
// Declare data the in-flight work WILL change (reads as pending until settle):
const rename = action(function* (todo, text) {
setOptimisticTodos(() => {
todo.text = text;
});
affects(todo, "updatedAt"); // server changes this slot too — pend it
yield api.rename(todo.id, text);
refresh(todos);
});
// Optimistic signal
const [name, setName] = createOptimistic("Alice");
```
Optimistic writes revert when the transition completes. Division of labor: optimistic writes _show_ the expected value, `affects` _pends_ data you know is changing but can't show yet, and process affordances ("saving…") are a co-written `createOptimistic(false)` flag — not `isPending`.
---
## Control-flow components
```tsx
// List, keyed by identity (default)
{(item, i) => }
// List, non-keyed (replaces )
// item is an accessor: read it in JSX / a memo, not at the top of the
// callback — the callback body is an owner, not a tracking scope.
{(item, i) => }
// List with custom key
t.id} fallback={}>
{item => }
// Range / count (no diffing) — i is a plain number, not an accessor
}>
{i => }
// Conditional (function child receives narrowed accessor — call it!)
}>
{u => }
// Branching
}>
{() => }
// Async boundary (replaces )
} on={id()}>
// Error boundary (replaces )
// reset is an action for retrying the errored branch.
}>
// Coordinate sibling Loadings (replaces ).
// Default order is "sequential" — siblings reveal in registration order
// as each resolves. `collapsed` (sequential only) suppresses tail-sibling
// fallbacks past the frontier. Other orders: "together" | "natural".
}>}>
// Dynamic component — factory form (canonical). Stable Component identity;
// composes with lazy(), routing, polymorphic patterns.
import { dynamic } from "@solidjs/web";
const Active = dynamic(() => isEditing() ? Editor : Viewer);
return ;
// JSX-wrapper convenience form. Use when the source is inline and you don't
// need to capture the component identity.
import { Dynamic } from "@solidjs/web";
```
`` non-keyed: `item` is an **accessor** and `i` is a plain number.
`` default/keyed-by-identity: `item` is a **plain value** and `i` is an accessor.
``: `i` is a **plain number**.
Whichever argument is the accessor, read it **in JSX, a memo, or an effect** —
the callback body itself is an owner, **not a tracking scope**. `let x = item().x`
at the top of the callback freezes at the initial value (dev warns
`STRICT_READ_UNTRACKED`). The same holds for `` / `` function children.
---
## Context, components, lazy
Context is for state that belongs to a subtree, which includes app-wide
state in an app that renders on the server: a value created inside a
component is created once per request, and the Provider owns and disposes
it. **Module scope is shared by every request in the same process, so
reserve it for constants** (and the `createContext` call itself). A
client-only app can get away with a module-scope store, but it becomes
shared server state the day SSR is turned on, so creating state in a
Provider is the portable choice. That's why the default-less form requires
a Provider.
```tsx
// Default-less — the canonical form. No Provider → ContextNotFoundError.
type TodosCtx = readonly [Store, TodoActions];
const TodosContext = createContext();
function App() {
return (
{" "}
{/* the context IS the provider */}
);
}
function TodoList() {
const [todos, { addTodo }] = useContext(TodosContext); // typed as TodosCtx
// ...
}
```
```tsx
// Default form — only for primitive fallbacks (theme, locale, frozen config).
// Outside any Provider, useContext returns the default.
const Theme = createContext<"light" | "dark">("light");
function Page() {
const theme = useContext(Theme); // "light" | "dark"
return
...
;
}
```
`undefined` means "not provided": `createContext(undefined)`
is still default-less, and `` counts as no Provider —
both throw `ContextNotFoundError`. For an optional context use `null`:
`createContext(null)` (and a Provider may pass `null`).
Don't write a `useTodos`-style wrapper that re-throws on missing Provider —
the default-less form already throws, and `useContext` is typed `T` (no
`| undefined`). The wrapper is React-flavored boilerplate that no longer
earns its keep.
```tsx
// Resolve children once
const list = children(() => props.children);
list.toArray();
// Async component
const Heavy = lazy(() => import("./Heavy"));
```
Component types:
```ts
type Basic = Component
; // no implicit children
type Empty = VoidComponent
; // forbids children
type WithChildren = ParentComponent
; // optional renderer-neutral Element children
type Flow = FlowComponent; // requires children of type C
```
---
## DOM rendering
```ts
import { render, hydrate, Portal } from "@solidjs/web";
const dispose = render(() => , document.getElementById("root")!);
hydrate(() => , document.getElementById("root")!);
```
### Refs and directives
```jsx
// Element access