React Hooks revolutionized the way state and side effects are managed in functional components. Beyond the basic usage of `useState` and `useEffect`, advanced patterns enable the creation of reusable, performant, and maintainable code. This guide assumes familiarity with basic Hooks (useState, useEffect, useContext). Examples use React 18+ and TypeScript for robust typing. ## Mastering useEffect: Avoiding Common Pitfalls The `useEffect` hook is often misunderstood and misused. A deep understanding of how it works helps avoid subtle bugs and performance issues. The fundamental principle: `useEffect` synchronizes a component with an external system. If the effect doesn't communicate with the outside world (API, DOM, timer), it's probably unnecessary. ```tsx // hooks/useDocumentTitle.ts // Custom hook to synchronize document title import { useEffect } from 'react' export function useDocumentTitle(title: string) { useEffect(() => { // Save the previous title const previousTitle = document.title // Update the title document.title = title // Cleanup: restore previous title on unmount return () => { document.title = previousTitle } }, [title]) // Only trigger when title changes } ``` The most common mistake is omitting the dependency array or including unstable values. Every value used in the effect must be listed in the dependencies. ```tsx // components/UserProfile.tsx 'use client' import { useEffect, useState } from 'react' interface User { id: string name: string email: string } interface UserProfileProps { userId: string } export function UserProfile({ userId }: UserProfileProps) { const [user, setUser] = useState(null) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) useEffect(() => { // Flag to prevent state updates after unmount let isMounted = true // Controller to cancel pending requests const controller = new AbortController() async function fetchUser() { setLoading(true) setError(null) try { const response = await fetch(`/api/users/${userId}`, { signal: controller.signal }) if (!response.ok) { throw new Error('User not found') } const data = await response.json() // Check if component is still mounted if (isMounted) { setUser(data) } } catch (err) { // Ignore abort errors if (err instanceof Error && err.name !== 'AbortError') { if (isMounted) { setError(err.message) } } } finally { if (isMounted) { setLoading(false) } } } fetchUser() // Cleanup: abort request and mark as unmounted return () => { isMounted = false controller.abort() } }, [userId]) // Re-run effect when userId changes if (loading) return

if (error) return

Error: {error}

if (!user) return null return (

{user.name}

{user.email}

) } ``` This pattern with `AbortController` and `isMounted` flag prevents memory leaks and state updates on unmounted components. ## Creating Reusable Custom Hooks Custom hooks encapsulate reusable logic. A good custom hook follows the single responsibility principle and exposes a clear API. ```tsx // hooks/useLocalStorage.ts // Generic hook to persist state in localStorage import { useState, useEffect, useCallback } from 'react' export function useLocalStorage( key: string, initialValue: T ): [T, (value: T | ((prev: T) => T)) => void, () => void] { // Initialize state with stored value or default const [storedValue, setStoredValue] = useState(() => { if (typeof window === 'undefined') { return initialValue } try { const item = window.localStorage.getItem(key) return item ? JSON.parse(item) : initialValue } catch (error) { console.warn(`Error reading localStorage "${key}":`, error) return initialValue } }) // Sync with localStorage on every change useEffect(() => { if (typeof window === 'undefined') return try { window.localStorage.setItem(key, JSON.stringify(storedValue)) } catch (error) { console.warn(`Error writing localStorage "${key}":`, error) } }, [key, storedValue]) // Function to update value const setValue = useCallback((value: T | ((prev: T) => T)) => { setStoredValue((prev) => { const nextValue = value instanceof Function ? value(prev) : value return nextValue }) }, []) // Function to remove value const removeValue = useCallback(() => { setStoredValue(initialValue) if (typeof window !== 'undefined') { window.localStorage.removeItem(key) } }, [key, initialValue]) return [storedValue, setValue, removeValue] } ``` This hook can be used in any component to persist data. ```tsx // components/ThemeToggle.tsx 'use client' import { useLocalStorage } from '@/hooks/useLocalStorage' type Theme = 'light' | 'dark' | 'system' export function ThemeToggle() { const [theme, setTheme] = useLocalStorage('theme', 'system') return ( ) } ``` Custom hooks always start with "use" (useLocalStorage, useFetch, useDebounce). This convention allows React to verify hook rules and enables linting tools to work correctly. ## Composition Pattern with useReducer For complex state with multiple possible actions, `useReducer` provides a more predictable structure than multiple `useState` calls. ```tsx // hooks/useCart.ts // Cart management hook with useReducer import { useReducer, useCallback, useMemo } from 'react' interface CartItem { id: string name: string price: number quantity: number } interface CartState { items: CartItem[] isOpen: boolean } type CartAction = | { type: 'ADD_ITEM'; payload: Omit } | { type: 'REMOVE_ITEM'; payload: string } | { type: 'UPDATE_QUANTITY'; payload: { id: string; quantity: number } } | { type: 'CLEAR_CART' } | { type: 'TOGGLE_CART' } function cartReducer(state: CartState, action: CartAction): CartState { switch (action.type) { case 'ADD_ITEM': { const existingItem = state.items.find( (item) => item.id === action.payload.id ) if (existingItem) { // Increment quantity if item exists return { ...state, items: state.items.map((item) => item.id === action.payload.id ? { ...item, quantity: item.quantity + 1 } : item ) } } // Add new item return { ...state, items: [...state.items, { ...action.payload, quantity: 1 }] } } case 'REMOVE_ITEM': return { ...state, items: state.items.filter((item) => item.id !== action.payload) } case 'UPDATE_QUANTITY': return { ...state, items: state.items.map((item) => item.id === action.payload.id ? { ...item, quantity: action.payload.quantity } : item ).filter((item) => item.quantity > 0) } case 'CLEAR_CART': return { ...state, items: [] } case 'TOGGLE_CART': return { ...state, isOpen: !state.isOpen } default: return state } } const initialState: CartState = { items: [], isOpen: false } export function useCart() { const [state, dispatch] = useReducer(cartReducer, initialState) // Memoized actions to avoid re-renders const addItem = useCallback( (item: Omit) => { dispatch({ type: 'ADD_ITEM', payload: item }) }, [] ) const removeItem = useCallback((id: string) => { dispatch({ type: 'REMOVE_ITEM', payload: id }) }, []) const updateQuantity = useCallback((id: string, quantity: number) => { dispatch({ type: 'UPDATE_QUANTITY', payload: { id, quantity } }) }, []) const clearCart = useCallback(() => { dispatch({ type: 'CLEAR_CART' }) }, []) const toggleCart = useCallback(() => { dispatch({ type: 'TOGGLE_CART' }) }, []) // Memoized derived values const total = useMemo( () => state.items.reduce( (sum, item) => sum + item.price * item.quantity, 0 ), [state.items] ) const itemCount = useMemo( () => state.items.reduce((sum, item) => sum + item.quantity, 0), [state.items] ) return { items: state.items, isOpen: state.isOpen, total, itemCount, addItem, removeItem, updateQuantity, clearCart, toggleCart } } ``` This approach centralizes all cart logic and makes unit testing easier. ## Optimization with useMemo and useCallback These hooks prevent unnecessary calculations or function recreations. Their usage should be targeted: applying them everywhere degrades performance instead of improving it. ```tsx // components/ProductList.tsx 'use client' import { useState, useMemo, useCallback, memo } from 'react' interface Product { id: string name: string price: number category: string inStock: boolean } interface ProductListProps { products: Product[] } // Memoized child component const ProductCard = memo(function ProductCard({ product, onAddToCart }: { product: Product onAddToCart: (id: string) => void }) { console.log(`Render ProductCard: ${product.name}`) return (

{product.name}

${product.price}

) }) export function ProductList({ products }: ProductListProps) { const [filter, setFilter] = useState('') const [sortBy, setSortBy] = useState<'name' | 'price'>('name') const [cart, setCart] = useState([]) // useMemo: memoize result of expensive computation const filteredAndSortedProducts = useMemo(() => { console.log('Computing filteredAndSortedProducts') let result = products // Filter by name if (filter) { result = result.filter((p) => p.name.toLowerCase().includes(filter.toLowerCase()) ) } // Sort result = [...result].sort((a, b) => { if (sortBy === 'name') { return a.name.localeCompare(b.name) } return a.price - b.price }) return result }, [products, filter, sortBy]) // Recompute only when these deps change // useCallback: memoize a function const handleAddToCart = useCallback((productId: string) => { setCart((prev) => [...prev, productId]) }, []) // Empty deps: function never changes // Memoized statistics const stats = useMemo( () => ({ total: filteredAndSortedProducts.length, inStock: filteredAndSortedProducts.filter((p) => p.inStock).length, avgPrice: filteredAndSortedProducts.reduce((sum, p) => sum + p.price, 0) / filteredAndSortedProducts.length || 0 }), [filteredAndSortedProducts] ) return (

setFilter(e.target.value)} placeholder="Search..." className="px-3 py-2 border rounded-lg" />

{stats.total} products ({stats.inStock} in stock) - Average price: ${stats.avgPrice.toFixed(2)}

{filteredAndSortedProducts.map((product) => ( ))}

) } ``` These hooks add complexity. Use them only for: (1) genuinely expensive computations, (2) props passed to components memoized with `memo()`, (3) dependencies of other hooks. ## Debounce Hook for Search Inputs Debouncing prevents an action from executing too frequently, typically during input in a search field. ```tsx // hooks/useDebounce.ts // Generic debounce hook import { useState, useEffect } from 'react' export function useDebounce(value: T, delay: number): T { const [debouncedValue, setDebouncedValue] = useState(value) useEffect(() => { // Create a timer that updates the value after delay const timer = setTimeout(() => { setDebouncedValue(value) }, delay) // Cleanup: cancel timer if value changes before delay return () => { clearTimeout(timer) } }, [value, delay]) return debouncedValue } ``` ```tsx // components/SearchInput.tsx 'use client' import { useState, useEffect } from 'react' import { useDebounce } from '@/hooks/useDebounce' interface SearchResult { id: string title: string } export function SearchInput() { const [query, setQuery] = useState('') const [results, setResults] = useState([]) const [loading, setLoading] = useState(false) // Debounce the query by 300ms const debouncedQuery = useDebounce(query, 300) useEffect(() => { // Don't search if query is empty if (!debouncedQuery.trim()) { setResults([]) return } async function search() { setLoading(true) try { const response = await fetch( `/api/search?q=${encodeURIComponent(debouncedQuery)}` ) const data = await response.json() setResults(data.results) } catch (error) { console.error('Search error:', error) } finally { setLoading(false) } } search() }, [debouncedQuery]) // Only triggered when debouncedQuery changes return (

setQuery(e.target.value)} placeholder="Search..." className="w-full px-4 py-2 border rounded-lg" /> {loading && (

)} {results.length > 0 && (

{result.title}

)}

) } ``` The component only performs the search 300ms after the user stops typing, avoiding dozens of unnecessary requests. ## useImperativeHandle for Advanced Refs This hook exposes specific methods of a child component to the parent via a ref. ```tsx // components/VideoPlayer.tsx 'use client' import { useRef, useImperativeHandle, forwardRef, useState, useCallback } from 'react' // Interface of exposed methods export interface VideoPlayerRef { play: () => void pause: () => void seek: (time: number) => void getCurrentTime: () => number } interface VideoPlayerProps { src: string poster?: string } export const VideoPlayer = forwardRef( function VideoPlayer({ src, poster }, ref) { const videoRef = useRef(null) const [isPlaying, setIsPlaying] = useState(false) // Expose only desired methods to parent useImperativeHandle( ref, () => ({ play: () => { videoRef.current?.play() setIsPlaying(true) }, pause: () => { videoRef.current?.pause() setIsPlaying(false) }, seek: (time: number) => { if (videoRef.current) { videoRef.current.currentTime = time } }, getCurrentTime: () => { return videoRef.current?.currentTime ?? 0 } }), [] // No deps: methods always use current ref ) const handlePlayPause = useCallback(() => { if (isPlaying) { videoRef.current?.pause() } else { videoRef.current?.play() } setIsPlaying(!isPlaying) }, [isPlaying]) return (

) } ) ``` ```tsx // components/VideoController.tsx 'use client' import { useRef } from 'react' import { VideoPlayer, VideoPlayerRef } from './VideoPlayer' export function VideoController() { const playerRef = useRef(null) const handleSkipForward = () => { if (playerRef.current) { const currentTime = playerRef.current.getCurrentTime() playerRef.current.seek(currentTime + 10) } } return (

) } ``` This pattern is particularly useful for media components, forms, or any interface requiring imperative control. ## Request Lifecycle Management Hook An advanced hook to manage loading, error, and data states with strict typing. ```tsx // hooks/useFetch.ts // Generic hook for HTTP requests import { useState, useEffect, useCallback, useRef } from 'react' interface UseFetchState { data: T | null loading: boolean error: Error | null } interface UseFetchOptions { immediate?: boolean // Execute immediately on mount onSuccess?: (data: T) => void onError?: (error: Error) => void } export function useFetch( url: string, options: UseFetchOptions = {} ) { const { immediate = true, onSuccess, onError } = options const [state, setState] = useState>({ data: null, loading: immediate, error: null }) // Ref to prevent updates after unmount const mountedRef = useRef(true) // Ref for abort controller const abortControllerRef = useRef(null) const execute = useCallback(async () => { // Abort previous request if in progress abortControllerRef.current?.abort() abortControllerRef.current = new AbortController() setState((prev) => ({ ...prev, loading: true, error: null })) try { const response = await fetch(url, { signal: abortControllerRef.current.signal }) if (!response.ok) { throw new Error(`HTTP ${response.status}: ${response.statusText}`) } const data: T = await response.json() if (mountedRef.current) { setState({ data, loading: false, error: null }) onSuccess?.(data) } return data } catch (error) { // Ignore abort errors if (error instanceof Error && error.name === 'AbortError') { return null } const err = error instanceof Error ? error : new Error('Unknown error') if (mountedRef.current) { setState({ data: null, loading: false, error: err }) onError?.(err) } return null } }, [url, onSuccess, onError]) const reset = useCallback(() => { setState({ data: null, loading: false, error: null }) }, []) // Execute on mount if immediate=true useEffect(() => { if (immediate) { execute() } return () => { mountedRef.current = false abortControllerRef.current?.abort() } }, [execute, immediate]) return { ...state, execute, reset, isIdle: !state.loading && !state.data && !state.error } } ``` This hook provides a complete API for handling any request with automatic cancellation and lifecycle management. ## Conclusion Advanced React Hooks patterns enable the creation of maintainable and performant code. Key takeaways: - ✅ **useEffect**: always include cleanup and handle race conditions with AbortController - ✅ **Custom hooks**: encapsulate reusable logic with a clear API - ✅ **useReducer**: prefer for complex state with multiple actions - ✅ **useMemo/useCallback**: use in a targeted manner, only when necessary - ✅ **useDebounce**: limit frequent executions for search functionality - ✅ **useImperativeHandle**: expose imperative methods in a controlled way Mastering these patterns distinguishes intermediate React developers from experts. Each hook solves a specific problem: choosing the right tool at the right time is the key to robust React architecture.