Glossary

Visual reference

Three pictures the rest of this page leans on. Pre-rendered SVGs (mmdc --scale 8), so they stay crisp at any zoom and add no runtime JS to the page.

General reactivity

closure

A function that "remembers" the variables in scope where it was defined. In framework code, the cleanup function returned by an effect is a closure over the setup variables (timer ids, controllers, etc.).

mount / unmount

Mount = the component's DOM is added to the page. Unmount = it's removed. Most setup and teardown work hangs off these moments.

cleanup

Code that runs on unmount (or before re-running an effect) to undo what setup did — clear intervals, abort fetches, remove listeners. Skipping it leaks memory and creates "zombie" callbacks that fire after the component is gone.

subscribe / subscription

Telling a reactive source ("call me when you change") and receiving updates. The framework adapter usually handles unsubscribing on unmount so you don't have to.

store

A piece of state that lives outside any one component, so multiple components can read and write the same value. Nanostores, Pinia, Redux, Zustand all use this term. Local state (useState/ref/$state) is not usually called a store.

controlled input

A form input whose displayed value is driven entirely by your state, not by the DOM. React's standard pattern: <input value={x} onChange={e => setX(e.target.value)} />. Vue and Svelte usually handle this implicitly via v-model / bind:value.

dependency tracking (auto vs manual)

For a derived value or an effect, "deps" are the reactive things it reads. React makes you list them explicitly (dependency array); Vue and Svelte 5 detect them automatically by recording reactive reads at runtime.

React

JSX

React's HTML-in-JavaScript syntax. Compiled to function calls. Looks like HTML but follows JS semantics — class is className, event handlers are onClick not onclick.

useState

Hook for local component state. const [x, setX] = useState(initial). Calling setX schedules a re-render with the new value.

useEffect

Hook for side effects (fetches, subscriptions, timers). Runs after render. Takes a function and a dependency array; the previous effect's cleanup return runs before each re-run and on unmount.

useMemo

Hook for memoizing a derived value. Only recomputes when its dep array changes. Equivalent to Vue's computed or Svelte's $derived, but with manual deps.

useRef

Hook for a "ref object" — a stable mutable container with a .current field. Most often holds a DOM element (passed via the ref JSX prop) or any value that should survive renders without triggering them.

dependency array

The second argument to useEffect / useMemo / useCallback. Lists the values the hook reads. React re-runs the hook only when something in the array changes (using Object.is). [] means "run only once after mount".

cleanup return

A function returned by useEffect that React calls before the next effect run and on unmount. The standard place for clearInterval, unsubscribe, controller.abort, etc.

Vue

ref (Composition API)

Vue's wrapper for a single reactive value. const x = ref(0). Read or write via .value in script; templates auto-unwrap so {{ x }} just works. Different concept from a "DOM ref" (which is also called ref but bound by template name).

computed

Vue's auto-tracked derived value. const sum = computed(() => a.value + b.value). Recomputes lazily when read; tracks reactive reads inside automatically — no dep list to maintain.

writable computed

A computed with both get and set. computed({ get, set }). Lets v-model bind to a derived value (e.g. one backed by a store) by giving it a writable surface.

onMounted / onUnmounted

Vue's lifecycle hooks. Two separate functions for setup and teardown — Vue doesn't pair them via a return value the way React's useEffect does.

v-model

Vue's two-way binding directive. v-model="x" on a text input is sugar for :value="x" + @input="x = $event.target.value". Other components define their own contract; for <input> it just works.

v-model modifiers

Append .modifier to v-model. .lazy switches the listener from input to change (commits on blur). .number casts the input string to a Number. .trim trims whitespace.

defineProps

Compile-macro inside <script setup> for declaring a component's props. Takes a TS generic for typing: defineProps<{ product: Product }>().

<script setup>

The terse, modern Vue Single-File-Component syntax where the top-level script body IS the component setup. Cleaner than the older setup() { ... return { ... } } form.

Composition API

The function-based Vue 3 API (refs, computed, watchers, lifecycle hooks). Contrast with the Options API where state lives under data(), methods under methods, etc. This project uses Composition API throughout.

Svelte 5

rune

A $-prefixed function-like primitive in Svelte 5 ($state, $derived, $effect, $props). Signals to the compiler that the next thing is reactive. Replaces several Svelte 4 conventions (top-level let, $: reactive statements, export let).

$state

A reactive value. let count = $state(0). Read and write as a normal variable; the compiler wires up reactivity.

$derived

A reactive computed value. const doubled = $derived(count * 2). Auto-tracks reactive reads in the expression — no deps. Use $derived.by(() => { ... }) when the derivation needs multiple statements.

$effect

A reactive side effect. $effect(() => { ... return cleanup }). Re-runs when its tracked reads change; the returned function is the cleanup. Same shape as React's useEffect, no manual deps.

$props

The runes way to declare component props. let { product } = $props() with a TS annotation on the destructure. Replaces Svelte 4's export let.

bind:value

Svelte's two-way binding on an input. <input bind:value={x} />. Updates x on every input event. Svelte 5 also supports function-binding bind:value={() => x, (v) => x = v} for non-writable backing values.

bind:this

Captures the DOM element into a variable. <div bind:this={el}></div> then el?.scrollBy(...). Svelte's equivalent of React's useRef + ref prop, with no .current indirection.

$-prefix auto-subscription

Inside a .svelte file, prefixing an imported store with $ (e.g. $cart) makes Svelte subscribe on mount and unsubscribe on unmount. Works for any object with the Svelte store contract — nanostores qualifies.

nanostores

atom

The basic nanostores primitive — a single value with .get(), .set(), and .subscribe(). Created with atom(initial). Framework-agnostic; the framework adapter handles re-rendering.

computed (nanostores)

A read-only store derived from one or more other stores. computed(cart, $cart => sum). Notification only fires when the derived value actually changes — saves consumers from re-rendering on no-op updates.

persistentAtom

An atom backed by localStorage (from @nanostores/persistent). Same API as atom, plus a key string and encode/decode functions. Survives full page navigations and reloads.

useStore (adapter)

The hook-shaped function that subscribes a component to a nanostore and returns its current value. @nanostores/react returns the value directly; @nanostores/vue returns a Vue ref. Svelte doesn't need an adapter — it uses $store syntax directly.