All Cheat Sheets
React Hooks Cheat Sheet
Essential React Hooks reference — useState, useEffect, useRef, useMemo, useCallback, and custom hooks.
State & Refs
useState
const [val, setVal] = useState(initial)useReducer
const [state, dispatch] = useReducer(reducer, init)useRef
const ref = useRef<HTMLDivElement>(null)Effects & Lifecycle
On mount
useEffect(() => { ... }, [])On change
useEffect(() => { ... }, [dep])Cleanup
useEffect(() => { return () => cleanup() }, [])useLayoutEffect
useLayoutEffect(() => { ... }, [])Fires synchronously after DOM mutationsPerformance
useMemo
const val = useMemo(() => expensive(a), [a])useCallback
const fn = useCallback(() => { ... }, [dep])useTransition
const [isPending, startTransition] = useTransition()useDeferredValue
const deferred = useDeferredValue(value)Context
Create
const Ctx = createContext(defaultValue)Provide
<Ctx.Provider value={val}>...</Ctx.Provider>Consume
const val = useContext(Ctx)React 19+ (Server)
use()
const data = use(promise)Unwrap promises/contextuseFormStatus
const { pending } = useFormStatus()useActionState
const [state, action] = useActionState(fn, init)useOptimistic
const [optimistic, addOptimistic] = useOptimistic(state)Custom Hook Pattern
Template
function useMyHook(arg) {
const [s, setS] = useState(null)
useEffect(() => { ... }, [arg])
return s
}Keep the references coming
One email a week: new and trending developer tools, fresh comparisons, and what shipped. Unsubscribe in one click.