React v18.0INTERMEDIATEReact Hooks
Quick reference for all React Hooks with practical examples
8 min read
reacthooksstateeffectsrefmemo
Table of Contents
State & Updates
Managing component state and triggering re-renders
useState
Local component state
javascript
💡 State updates are batched automatically
⚡ Use function update for values based on previous state
⚠️ State updates are async - don't read immediately after setting
useReducer
Complex state logic with actions
javascript
✅ Better than useState for complex logic
💡 Actions make state changes predictable
⚡ Great for forms with many fields
Side Effects
Handle side effects and external interactions
useEffect
Side effects and lifecycle
javascript
⚠️ Always include dependencies or ESLint will warn
💡 Return cleanup function for subscriptions
✅ Empty deps [] = componentDidMount
useLayoutEffect
Synchronous DOM updates
javascript
⚠️ Blocks visual updates - use sparingly
💡 Same API as useEffect but synchronous
Context & Refs
Share data and access DOM elements
useContext
Consume context values
javascript
💡 Component re-renders when context value changes
✅ Better than prop drilling for deep trees
useRef
Mutable refs and DOM access
javascript
⚠️ .current changes don't trigger re-renders
💡 Perfect for storing previous values
✅ Use for DOM elements, timers, subscriptions
Performance
Optimize re-renders and expensive operations
useMemo
Memoize expensive calculations
javascript
💡 Only use for expensive operations
⚠️ Don't overuse - adds complexity
✅ Great for: sorting, filtering, calculations
useCallback
Memoize functions
javascript
💡 Prevents unnecessary child re-renders
✅ Use when passing callbacks to memoized components
⚠️ Don't use for every function
Additional Hooks
Other useful built-in hooks
useImperativeHandle
Customize ref values
📄 Codejavascript
💡 Expose imperative API to parent
⚠️ Use sparingly - breaks React patterns
useId
Generate unique IDs
📄 Codejavascript
✅ SSR-safe unique IDs
💡 Perfect for form labels and ARIA attributes
React 18+ Hooks
New concurrent features
📄 Codejavascript
💡 useTransition for responsive UI during heavy updates
✅ useDeferredValue for expensive child components
🔍 useDebugValue shows in React DevTools
Custom Hook Patterns
Common custom hooks ready to use
Common Utility Hooks
Frequently used custom hooks
javascript
💡 Extract common logic into custom hooks
✅ Custom hooks can use other hooks
⚡ Share stateful logic, not state itself
Rules & Best Practices
Essential rules and patterns
Hook Rules
Must follow these rules
📄 Codejavascript
⚠️ Only call hooks at the top level
⚠️ Only call hooks from React functions
💡 ESLint plugin enforces these rules