---
title: "React Hooks Cheatsheet | FindUtils"
description: "useState, useEffect, useRef, useMemo, React 19 hooks, and custom hook patterns"
url: https://findutils.com/cheatsheets/react-hooks/
---

# React Hooks Cheatsheet

useState, useEffect, useRef, useMemo, React 19 hooks, and custom hook patterns 53 commands in 9 sections, filed under [Web Development](https://findutils.com/cheatsheets/web/).

## State Hooks

- `const [value, setValue] = useState(initial)`: Declare state variable with initial value
- `setValue(newValue)`: Replace state with new value
- `setValue(prev => prev + 1)`: Update state based on previous value
- `useState(() => expensiveComputation())`: Lazy initializer; development Strict Mode can call it twice
- `const [state, dispatch] = useReducer(reducer, init)`: State with reducer pattern
- `dispatch({ type: "INCREMENT" })`: Dispatch action to reducer
- `useReducer(reducer, arg, createInit)`: Lazy reducer initialization

## Effect Hooks

- `useEffect(() => { ... })`: Run the effect after each committed render
- `useEffect(() => { ... }, [])`: Set up on mount; development Strict Mode adds a setup and cleanup check
- `useEffect(() => { ... }, [dep])`: Run effect when dep changes
- `useEffect(() => { return () => cleanup(); }, [])`: Clean up on unmount; development Strict Mode also checks cleanup
- `useLayoutEffect(() => { ... })`: Run synchronously after DOM mutations
- `useInsertionEffect(() => { ... })`: Inject styles before layout (CSS-in-JS)

## Ref Hooks

- `const ref = useRef(null)`: Create mutable ref object
- `ref.current`: Access current ref value
- `<input ref={ref} />`: Attach ref to DOM element
- `const countRef = useRef(0)`: Store value without re-renders
- `useImperativeHandle(ref, () => ({ focus }))`: Customize ref exposed to parent
- `forwardRef((props, ref) => <input ref={ref} />)`: Forward ref to child component

## Context Hook

- `const ctx = createContext(defaultValue)`: Create a context object
- `<MyContext.Provider value={data}>`: Provide context value to children
- `const value = useContext(MyContext)`: Consume nearest context value
- `useContext(ThemeContext) ?? "light"`: Fallback for missing provider

## Performance Hooks

- `const memoized = useMemo(() => compute(a, b), [a, b])`: Memoize expensive computation
- `const handler = useCallback((e) => { ... }, [dep])`: Memoize callback function
- `const [isPending, startTransition] = useTransition()`: Mark state update as non-urgent
- `startTransition(() => setSearchQuery(input))`: Defer a non-urgent update
- `const deferredValue = useDeferredValue(value)`: Defer re-render for a value
- `memo(Component)`: Skip re-render if props unchanged

## Actions, IDs & External Data

- `const data = use(promise)`: Unwrap promise or context
- `const [state, action, isPending] = useActionState(fn, init)`: Form action with pending state
- `const [optimistic, setOptimistic] = useOptimistic(state)`: Optimistic UI updates
- `const { pending } = useFormStatus()`: Form submission pending state
- `useId()`: Generate unique ID for accessibility
- `useSyncExternalStore(subscribe, getSnapshot)`: Subscribe to external data store

## Custom Hook Patterns

- `function useLocalStorage(key, init) { ... }`: Persist state to localStorage
- `function useDebounce(value, delay) { ... }`: Debounce rapidly changing values
- `function useFetch(url) { ... }`: Data fetching with loading state
- `function useMediaQuery(query) { ... }`: Respond to CSS media queries
- `function useClickOutside(ref, handler) { ... }`: Detect clicks outside element
- `function usePrevious(value) { ... }`: Track previous render value
- `function useInterval(callback, delay) { ... }`: Declarative setInterval wrapper
- `function useToggle(initial = false) { ... }`: Boolean toggle state

## Rules & Best Practices

- `Keep hooks at the top level; use is an exception`: The use API permits conditions and loops. Hooks such as useState and useEffect do not.
- `Only call hooks from React functions`: Components or custom hooks only
- `Name custom hooks with "use" prefix`: useXxx naming convention required
- `List all dependencies in the array`: Omitting deps causes stale closures
- `Avoid objects/arrays as deps (use primitives)`: Reference equality causes extra runs
- `Cleanup effects to prevent memory leaks`: Return cleanup function from useEffect

## Sources

- `https://react.dev/reference/react`: React API reference: hooks, context, and component APIs.
- `https://react.dev/reference/react/useEffect`: React useEffect: dependencies, cleanup, and development Strict Mode.
- `https://react.dev/reference/react/use`: React use: promise and context handling, including conditions and loops.
- `https://react.dev/reference/react/useState`: React useState: initializer behavior and development checks.

## Related

- Cheatsheet: [CSS Flexbox](https://findutils.com/cheatsheets/css-flexbox/)
- Cheatsheet: [CSS Grid](https://findutils.com/cheatsheets/css-grid/)
- Cheatsheet: [HTTP Status Codes](https://findutils.com/cheatsheets/http-status-codes/)
- Guide: [Tailwind to StyleX Migration: Convert and Review Token Files](https://findutils.com/guides/tailwind-to-stylex/)
- Guide: [Tailwind to StyleX Token Guide: Mapping and Validation](https://findutils.com/guides/tailwind-to-stylex-converter-guide/)