A searchable React hooks cheatsheet covering all built-in hooks with TypeScript syntax, usage examples, and common gotchas. Filter by hook name to find exactly what you need.
How to Use React Hooks Effectively
React hooks replaced class component lifecycle methods with composable functions. Understanding when to use each hook is key to writing performant, readable React code.
The Three Most Important Hooks
useState for component-local state that triggers re-renders when changed. useEffect for side effects (data fetching, subscriptions, DOM manipulation) after render. useContext for consuming context values without prop drilling. These three cover 90% of use cases.
Performance Optimization Hooks
Add useMemo and useCallback only after measuring performance issues — premature optimization with these hooks adds complexity without benefit. Use React DevTools Profiler to identify components that re-render unnecessarily before reaching for these optimizations.
Custom Hooks
Extract reusable stateful logic into custom hooks with the use prefix. A custom hook like useLocalStorage(key, defaultValue) wraps useState with serialization/deserialization, reusable across components. Custom hooks can call other hooks and return any values.
FAQ
Is this React cheatsheet free?
Yes, completely free. No account required.
When should I use useMemo vs useCallback?
useMemo memoizes a computed value — use it when a calculation is expensive and only needs to recalculate when specific dependencies change. useCallback memoizes a function reference — use it when passing a callback to a child component that uses React.memo, preventing unnecessary re-renders because the function reference would change on every render otherwise.
What is the useEffect cleanup function for?
The cleanup function (returned from useEffect) runs before the component unmounts or before the effect runs again. Use it to cancel subscriptions, clear timers, abort fetch requests, or remove event listeners to prevent memory leaks. Example: return () => clearInterval(timer) inside useEffect prevents timer accumulation.
Why does useEffect run twice in development?
In React 18 with Strict Mode, effects run twice in development to help find bugs with non-idempotent effect cleanup. This is intentional — React mounts, unmounts, and remounts the component. If your effect has side effects that shouldn't run twice, implement proper cleanup. In production, effects run only once per mount.
What is the difference between useState and useReducer?
useState is simpler and best for independent, primitive state values. useReducer is better when the next state depends on the previous state in complex ways, when you have multiple related state values that change together, or when state transitions follow specific actions (like Redux). useReducer also makes testing easier as the reducer is a pure function.
When should I use useContext?
Use useContext for values that many components at different levels need to access — like theme, current user, or locale. Avoid using context for state that changes frequently, as it re-renders all consumers. For performance-critical frequently-changing state, use a state management library like Zustand or Jotai instead.