• John Doe
• 24 Apr, 2026
• • Technology

React Hooks Patterns You Should Know in 2026

React hooks transformed how we write components. But knowing useState and useEffect is just the beginning. These are the patterns that separate good React code from great React code. The Problem with Scattered Logic Before hooks, stateful logic was locked inside class components or prop-drilled through component trees. Hooks let you extract and reuse logic cleanly. Here's what messy looks like: function UserProfile({ userId }: { userId: string }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { setLoading(true); fetch(`/api/users/${userId}`) .then(r => r.json()) .then(data => { setUser(data); setLoading(false); }) .catch(err => { setError(err); setLoading(false); }); }, [userId]); if (loading) return <Spinner />; if (error) return <Error message={error.message} />; return <div>{user.name}</div>; }There's nothing wrong with this, but the data-fetching logic is tangled with the UI. Let's fix that. Custom Hooks Extract the logic into a custom hook — any function starting with use: function useFetch<T>(url: string) { const [state, setState] = useState<{ data: T | null; loading: boolean; error: Error | null; }>({ data: null, loading: true, error: null }); useEffect(() => { let cancelled = false; setState(s => ({ ...s, loading: true })); fetch(url) .then(r => r.json()) .then(data => { if (!cancelled) setState({ data, loading: false, error: null }); }) .catch(error => { if (!cancelled) setState({ data: null, loading: false, error }); }); return () => { cancelled = true; }; }, [url]); return state; }// Usage — clean! function UserProfile({ userId }: { userId: string }) { const { data: user, loading, error } = useFetch<User>(`/api/users/${userId}`); if (loading) return <Spinner />; if (error) return <Error message={error.message} />; return <div>{user!.name}</div>; }The cancelled flag prevents state updates on unmounted components — always important for async effects. useReducer for Complex State When multiple pieces of state update together, useReducer is cleaner than multiple useState calls: type State = { items: CartItem[]; total: number; coupon: string | null; };type Action = | { type: 'ADD_ITEM'; item: CartItem } | { type: 'REMOVE_ITEM'; id: string } | { type: 'APPLY_COUPON'; code: string } | { type: 'CLEAR' };function cartReducer(state: State, action: Action): State { switch (action.type) { case 'ADD_ITEM': { const items = [...state.items, action.item]; return { ...state, items, total: computeTotal(items, state.coupon) }; } case 'REMOVE_ITEM': { const items = state.items.filter(i => i.id !== action.id); return { ...state, items, total: computeTotal(items, state.coupon) }; } case 'APPLY_COUPON': return { ...state, coupon: action.code, total: computeTotal(state.items, action.code) }; case 'CLEAR': return { items: [], total: 0, coupon: null }; } }function Cart() { const [state, dispatch] = useReducer(cartReducer, { items: [], total: 0, coupon: null }); return ( <button onClick={() => dispatch({ type: 'CLEAR' })}> Clear cart ({state.items.length} items) </button> ); }Reducers are pure functions — easy to test, easy to reason about. Move complex state transitions here and keep your components dumb.useCallback and useMemo: When They Matter A common misunderstanding: these hooks are not free performance wins. They have a cost too. Use them selectively. useMemo — memoize expensive calculations: function FilteredList({ items, filter }: Props) { // Only re-compute when items or filter changes const filtered = useMemo( () => items.filter(item => item.name.includes(filter)).sort(/* ... */), [items, filter] ); return <List items={filtered} />; }useCallback — stabilize function references passed to child components: function Parent() { const [count, setCount] = useState(0); const handleClick = useCallback(() => { console.log('clicked'); }, []); // stable reference return ( <> <button onClick={() => setCount(c => c + 1)}>Count: {count}</button> <MemoizedChild onClick={handleClick} /> </> ); }const MemoizedChild = React.memo(({ onClick }: { onClick: () => void }) => { console.log('child rendered'); return <button onClick={onClick}>Click</button>; });The useRef Pattern for Intervals A surprisingly tricky use case — you want an interval that always has access to the latest state: function useInterval(callback: () => void, delay: number | null) { const savedCallback = useRef(callback); useEffect(() => { savedCallback.current = callback; }, [callback]); useEffect(() => { if (delay === null) return; const id = setInterval(() => savedCallback.current(), delay); return () => clearInterval(id); }, [delay]); }// Usage function Timer() { const [count, setCount] = useState(0); useInterval(() => setCount(c => c + 1), 1000); return <div>Count: {count}</div>; }Closing Thought The best custom hook is one you never have to explain. If a component is doing too many things, extract a hook. If two components share the same logic pattern, extract a hook. The rule: if it's not about rendering, it probably belongs in a hook.