Cheat Sheet
The commands you keep forgetting, with a one-line description and a real example you can copy - 629 across 38 tools. Pick a tool in the sidebar, or search across all of them.
React Hooks
Hook signatures, the rules, and which hook fits which job.| Command | What it does | Example |
|---|---|---|
useState | Local state: value + setter; setter triggers re-render. | const [count, setCount] = useState(0) |
functional update | When new state depends on old - always safe. | setCount(c => c + 1) |
state: new references | Never mutate - copy, then set. | setItems([...items, newItem]) |
useEffect (mount) | Run once after first render - empty deps. | useEffect(() => { document.title = "Shop"; }, []) |
useEffect (on change) | Re-run when a dependency changes. | useEffect(() => { fetchUser(id).then(setUser); }, [id]) |
useEffect cleanup | Return a function to undo what you started. | useEffect(() => { const t = setInterval(tick, 1000); return () => clearInterval(t); }, []) |
useRef (DOM) | A handle to an element - focus, measure, scroll. | const inputRef = useRef(null); inputRef.current?.focus() |
useRef (mutable box) | Persists across renders WITHOUT re-rendering. | const renders = useRef(0); renders.current++ |
useMemo | Cache an expensive computed value by deps. | const sorted = useMemo(() => [...rows].sort(byDate), [rows]) |
useCallback | Stable function identity for memoized children. | const onSave = useCallback(() => save(id), [id]) |
useContext | Read the value from the nearest provider above. | const theme = useContext(ThemeContext) |
useReducer | Many update rules, one dispatch. | const [state, dispatch] = useReducer(reducer, initial) |
custom hook | Package reactive logic as use-prefixed function. | function useDebounce(value, ms) { /* useState + useEffect inside */ } |
rules of hooks | Top level only - never in ifs, loops, or callbacks. | const [x, setX] = useState(0); if (loading) return <Spinner /> |
list keys | Stable identity per item - never index on mutable lists. | items.map(i => <Row key={i.id} item={i} />) |
controlled input | Value from state, keystrokes into state. | <input value={email} onChange={e => setEmail(e.target.value)} /> |
pass the function | onClick={fn} runs on click; onClick={fn()} runs NOW. | <button onClick={() => remove(id)}>Delete</button> |
which hook when | Derived value: useMemo (or just compute). Side effect: useEffect. Shared: useContext. DOM: useRef. | const total = items.reduce((s, i) => s + i.price, 0) // no hook needed |