>docstishgithub

Hooks

useState, useRef, useMemo, useEffect, useLayoutEffect.

useState

Local component state.

let [count, setCount] = useState(0)
setCount(count + 1)
// or with updater
setCount((prev) => prev + 1)

useRef

Mutable ref that persists across renders.

let inputRef = useRef(null)
// inputRef.current holds the DOM node after render

useMemo

Memoizes a computed value. Recomputes when deps change. Matches React: (factory, deps).

let doubled = useMemo(() => count * 2, [count])

useEffect

Runs after paint. Use for side effects, subscriptions, fetch.

useEffect(() => {
  // runs when dep1 or dep2 change
  fetch("/api/data").then(...)
  return () => { /* cleanup */ }
}, [dep1, dep2])

useLayoutEffect

Runs synchronously after DOM updates, before paint. Use for layout measurements or DOM mutations that must not cause a flash.

useLayoutEffect(() => {
  // measure or mutate DOM
  return () => { /* cleanup */ }
}, [])

unstable_batchedUpdates

Batches multiple state updates into a single re-render.

import { unstable_batchedUpdates, useState } from 'lattish'
 
unstable_batchedUpdates(() => {
  setA(1)
  setB(2)
  setC(3)
})
// one re-render, not three