$devvkit resources --cheatsheet react-cheatsheet

React Cheatsheet

[frontend]

Every essential React pattern: hooks, props, state, effects, context, performance, and component patterns, with syntax and real use cases.48 commands · 6 sections

React is the most popular UI library for the web. This cheatsheet covers the patterns you write daily: hooks for state, effects, refs, and performance, props and event handling, context and reducers, forms, and the component patterns that scale.

Every entry shows real syntax followed by the use case: when and why you reach for it.

Hooks: State7

$const [count, setCount] = useState(0)

Use case: Local state: re-renders the component on change.Example: const [count, setCount] = useState(0) <button onClick={() => setCount(c => c + 1)}>{count}</button>

$useState(() => expensiveInit())

Use case: Lazy initializer: runs once, skips expensive work on every render.Example: const [rows] = useState(() => buildBigTable(data))

$setCount(c => c + 1)

Use case: Functional update: safe when the new value depends on the old.Example: setCount(c => c + 1) // correct under batching

$const [user, setUser] = useState<User | null>(null)

Use case: State with a type and initial null: loading states.Example: const [user, setUser] = useState<User | null>(null)

const [form, setForm] = useState({})
setForm(f => ({ ...f, name }))

Use case: Update one field of an object state: spread pattern.Example: setForm(f => ({ ...f, [name]: value }))

const [items, setItems] = useState([])
setItems(prev => [...prev, newItem])

Use case: Append to array state: immutable update.Example: setItems(prev => [...prev, item])

$const [tab, setTab] = useState<"home" | "settings">("home")

Use case: Union-typed state: tab switches and modes.Example: setTab("settings")

Hooks: Effects & Refs8

$useEffect(() => { }, [deps])

Use case: Side effects: fetch, subscriptions, DOM updates. Runs after render.Example: useEffect(() => { fetchData().then(setData) }, [userId])

$useEffect(() => { }, [])

Use case: Empty deps: runs once after mount. The mount effect.Example: useEffect(() => { analytics.track("page_view") }, [])

useEffect(() => {
  return () => cleanup()
}, [])

Use case: Cleanup function: unsubscribe and clear timers on unmount.Example: useEffect(() => { const t = setInterval(tick, 1000) return () => clearInterval(t) }, [])

useEffect(() => {
  document.title = title
}, [title])

Use case: Sync with the outside world: document, window, storage.Example: useEffect(() => { document.title = `${unread} unread` }, [unread])

const ref = useRef<HTMLDivElement>(null)
ref.current?.focus()

Use case: Ref: access DOM nodes imperatively.Example: const inputRef = useRef<HTMLInputElement>(null) <input ref={inputRef} /> <button onClick={() => inputRef.current?.focus()}>Focus</button>

const prev = useRef(0)
useEffect(() => { prev.current = count })

Use case: Track the previous value: compare old vs new.Example: useEffect(() => { if (count > prev.current) setTrend("up") prev.current = count })

const idRef = useRef<number>(0)
idRef.current = idRef.current + 1

Use case: Mutable value that does NOT trigger re-renders: counters, ids.Example: const nextId = useRef(0) function getId() { return ++nextId.current }

$useLayoutEffect(() => { }, [])

Use case: Runs before paint: measure layout without flicker.Example: useLayoutEffect(() => { const w = elRef.current?.offsetWidth setWidth(w) }, [])

Hooks: Performance7

$const memoized = useMemo(() => compute(a, b), [a, b])

Use case: Cache an expensive computation until deps change.Example: const total = useMemo(() => items.reduce((s, i) => s + i.price, 0), [items])

$const handler = useCallback(() => doSomething(x), [x])

Use case: Stable function identity: keeps memoized children from re-rendering.Example: const onSave = useCallback(() => save(form), [form])

$const Comp = memo(function Comp({ value }) { })

Use case: React.memo: skip re-renders when props are unchanged.Example: const Row = memo(function Row({ item }: { item: Item }) { return <li>{item.name}</li> })

const Lazy = lazy(() => import("./Heavy"))
<Suspense fallback={<Spinner />}><Lazy /></Suspense>

Use case: Code splitting: load heavy components on demand.Example: const Chart = lazy(() => import("./Chart")) <Suspense fallback={<Loader />}><Chart /></Suspense>

const [startTransition] = useTransition()
startTransition(() => setFilter(q))

Use case: Mark updates as non-urgent: keep typing responsive on big lists.Example: startTransition(() => setQuery(text))

$useDeferredValue(value)

Use case: Defer a value's update: stale-but-smooth during heavy renders.Example: const deferred = useDeferredValue(query) const results = useMemo(() => search(deferred), [deferred])

$useId()

Use case: Stable unique id: for labels and aria attributes.Example: const id = useId() <label htmlFor={id}>Name</label><input id={id} />

Hooks: Context & Reducers7

$const ThemeCtx = createContext<Theme>(defaultTheme)

Use case: Create context: share data without prop drilling.Example: const AuthCtx = createContext<{ user: User | null; login: (u: User) => void } | null>(null)

$<ThemeCtx.Provider value={theme}>{children}</ThemeCtx.Provider>

Use case: Provide the value: wrap the tree that needs it.Example: <AuthCtx.Provider value={{ user, login }}>{app}</AuthCtx.Provider>

$const theme = useContext(ThemeCtx)

Use case: Consume context in any child.Example: const { user, login } = useContext(AuthCtx)!

function useTheme() {
  const ctx = useContext(ThemeCtx)
  if (!ctx) throw new Error("useTheme must be used inside provider")
  return ctx
}

Use case: Custom hook wrapping context: fail fast, clean API.Example: export function useAuth() { const ctx = useContext(AuthCtx) if (!ctx) throw new Error("useAuth outside provider") return ctx }

$const [state, dispatch] = useReducer(reducer, initialState)

Use case: Reducer: complex state transitions as pure functions.Example: const [state, dispatch] = useReducer(cartReducer, { items: [], total: 0 })

function reducer(state, action) {
  switch (action.type) {
    case "add": return { ...state, items: [...state.items, action.item] }
    case "clear": return { items: [], total: 0 }
  }
}

Use case: Reducer with discriminated actions.Example: dispatch({ type: "add", item })

$useReducer(reducer, null, init)

Use case: Lazy reducer init: for state derived from props or storage.Example: const [state, d] = useReducer(reducer, null, () => loadFromStorage())

Component Patterns9

$function Card({ title, children }: { title: string; children: React.ReactNode })

Use case: Props with children: the layout component pattern.Example: function Card({ title, children }: Props) { return <div className="card"><h2>{title}</h2>{children}</div> }

$function Button({ variant = "primary", ...rest }: ButtonProps) { }

Use case: Default props via destructuring + rest spread.Example: function Icon({ size = 16, className, ...rest }: IconProps) { return <svg width={size} className={className} {...rest} /> }

$const Avatar = ({ src, name }: AvatarProps) => <img src={src} alt={name} />

Use case: Stateless function component: pure presentational.Example: const Badge = ({ label }: { label: string }) => <span className="badge">{label}</span>

$function Toggle({ on, onToggle }: { on: boolean; onToggle: () => void })

Use case: Controlled component: parent owns the state.Example: <Toggle on={isOn} onToggle={() => setIsOn(v => !v)} />

function useCounter(initial = 0) {
  const [count, setCount] = useState(initial)
  return { count, inc: () => setCount(c => c + 1) }
}

Use case: Custom hook: reuse stateful logic across components.Example: const { count, inc } = useCounter(10)

$function List({ items, renderItem }: { items: T[]; renderItem: (item: T) => ReactNode })

Use case: Render prop: the caller decides how to render.Example: <List items={users} renderItem={u => <Row key={u.id} user={u} />} />

$React.createPortal(child, document.body)

Use case: Portal: render outside the component tree. Modals and tooltips.Example: return createPortal( <div className="modal-backdrop">{children}</div>, document.body )

class ErrorBoundary extends React.Component {
  static getDerivedStateFromError() { return { hasError: true } }
}

Use case: Error boundary: catch render errors, show a fallback UI.Example: <ErrorBoundary fallback={<ErrorCard />}><App /></ErrorBoundary>

function App() {
  return <ErrorBoundary fallback={<Oops />}><Routes /></ErrorBoundary>
}

Use case: Top-level error boundary: the app-level crash guard.Example: // wrap route outlets for per-section boundaries

Forms & Events10

$onClick={() => ...}

Use case: Click handler: the most common event.Example: <button onClick={() => setOpen(true)}>Open</button>

$onChange={(e) => setValue(e.target.value)}

Use case: Controlled input: value from state, update on change.Example: <input value={name} onChange={e => setName(e.target.value)} />

$onSubmit={(e) => { e.preventDefault(); save() }}

Use case: Form submit: always preventDefault.Example: <form onSubmit={handleSubmit}><input name="email" /><button>Save</button></form>

$onKeyDown={(e) => { if (e.key === "Enter") ... }}

Use case: Keyboard events: shortcuts and Enter-to-submit.Example: onKeyDown={e => { if (e.key === "Escape") setOpen(false) }}

$onChange={(e) => setFiles(Array.from(e.target.files ?? []))}

Use case: File input: read selected files.Example: <input type="file" multiple onChange={handleFiles} />

$type="checkbox" checked={checked} onChange={e => setChecked(e.target.checked)}

Use case: Controlled checkbox.Example: <label><input type="checkbox" checked={agree} onChange={e => setAgree(e.target.checked)} /> Agree</label>

$onSubmit={async (e) => { e.preventDefault(); setSaving(true); try { await save() } finally { setSaving(false) } }}

Use case: Async submit with loading state.Example: // disable button while saving: <button disabled={saving}>{saving ? "Saving…" : "Save"}</button>

const formRef = useRef<HTMLFormElement>(null)
formRef.current?.reset()

Use case: Reset a form imperatively.Example: <form ref={formRef}>...</form> <button onClick={() => formRef.current?.reset()}>Reset</button>

$onBlur={() => validate(email)}

Use case: Validate on blur: friendly inline errors.Example: <input onBlur={() => setTouched(true)} /> {touched && error && <p className="error">{error}</p>}

$disabled={!form.name || !form.email}

Use case: Disable submit until valid: simple gating.Example: <button disabled={!isValid}>Submit</button>

Frequently asked questions

What is the difference between useState and useReducer?

useState is for simple independent values. useReducer manages complex state transitions with a reducer function and actions: better when updates depend on each other or need testing. Both trigger re-renders on change.

How does the useEffect dependency array work?

The effect runs after render when any dependency changes: [] runs once on mount, [value] runs when value changes, and no array runs after every render. Return a cleanup function for subscriptions and timers.

What is the difference between useEffect and useLayoutEffect?

useLayoutEffect runs synchronously after DOM mutations but before the browser paints: use it to measure layout and avoid visual flicker. useEffect runs after paint and is correct for most cases.

What is React.memo and when should I use it?

React.memo prevents re-renders when props are unchanged. Use it for expensive components that render often with stable props, but not as a default: the comparison itself costs time.