The React Hooks cheatsheet is a quick reference for all built-in React hooks. Find syntax, examples, and key patterns for useState, useEffect, useContext, useReducer, useCallback, useMemo, useRef, and more. Search and filter to find what you need instantly.
No hooks found
Try a different search term
How to Use This React Hooks Cheatsheet
React hooks were introduced in React 16.8 and let you use state and lifecycle features in function components. This cheatsheet covers every built-in hook with syntax, examples, and key patterns to help you use them correctly.
State Hooks
useState manages simple state values. useReducer handles complex state with multiple actions — think of it as a mini Redux inside a component. Use useState for independent pieces of data; use useReducer when state transitions are complex or inter-related.
Effect Hooks
useEffect runs after render. The dependency array controls when it fires: empty array = mount only, no array = every render, values in array = when those values change. Always return a cleanup function for subscriptions and timers. useLayoutEffect fires synchronously before browser paint — use it for DOM measurements.
Performance Hooks
useMemo and useCallback prevent unnecessary recalculation and re-creation of values/functions. Don't overuse them — profiling first, then memoize. useRef gives you a mutable container that doesn't trigger re-renders — perfect for DOM refs and previous value tracking.
Custom Hooks
Custom hooks are functions starting with "use" that can call other hooks. They let you share stateful logic between components without HOCs or render props. Common patterns: useLocalStorage, useWindowSize, useFetch, useDebounce.
FAQ
Is this React hooks cheatsheet free?
Yes, completely free with no signup required. All content runs in your browser.
Which React version does this cover?
This covers React 16.8+ hooks API which is stable and used in all modern React apps including React 17, 18, and 19. All listed hooks are production-stable.
What is the difference between useCallback and useMemo?
Both are performance optimization hooks. useMemo memoizes a computed value (result), while useCallback memoizes a function reference. Use useMemo to avoid expensive recalculations, use useCallback to avoid creating new function references on every render (useful when passing callbacks to child components wrapped in React.memo).
When should I use useReducer instead of useState?
Use useReducer when state logic is complex, involves multiple sub-values, or when the next state depends on the previous state in non-trivial ways. It also makes state transitions explicit and testable. useState is simpler for primitive values or simple objects.
Can I create my own custom hooks?
Yes. Custom hooks are JavaScript functions that start with 'use' and can call other hooks. They let you extract component logic into reusable functions. For example, a useLocalStorage hook wraps useState and localStorage, or useWindowSize tracks viewport dimensions.