Web Development · Cheatsheet
React Hooks Cheatsheet
useState, useEffect, useRef, useMemo, React 19 hooks, and custom hook patterns
53 commands 9 sections
No entry matches that filter.
-
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
-
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)
-
const ref = useRef(null)Create mutable ref object -
ref.currentAccess 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
-
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
-
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
-
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
-
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
-
Keep hooks at the top level; use is an exceptionThe use API permits conditions and loops. Hooks such as useState and useEffect do not. -
Only call hooks from React functionsComponents or custom hooks only -
Name custom hooks with "use" prefixuseXxx naming convention required -
List all dependencies in the arrayOmitting deps causes stale closures -
Avoid objects/arrays as deps (use primitives)Reference equality causes extra runs -
Cleanup effects to prevent memory leaksReturn cleanup function from useEffect
-
https://react.dev/reference/reactReact API reference: hooks, context, and component APIs. -
https://react.dev/reference/react/useEffectReact useEffect: dependencies, cleanup, and development Strict Mode. -
https://react.dev/reference/react/useReact use: promise and context handling, including conditions and loops. -
https://react.dev/reference/react/useStateReact useState: initializer behavior and development checks.