Now any component can add debounced search with two lines of code. Custom hooks compose other advanced hooks, hiding complexity beautifully. Even advanced developers fall into traps:
const FancyInput = forwardRef((props, ref) => const inputRef = useRef(); useImperativeHandle(ref, () => ( focus: () => inputRef.current.focus(), clear: () => inputRef.current.value = ''; , shake: () => /* animation logic */ )); return <input ref=inputRef ...props />; ); // Parent usage: const ref = useRef(); <FancyInput ref=ref /> ref.current.shake(); advanced hook
return results, isLoading ;
function useDashboardStream(url, filterFn) const [data, setData] = useState([]); const [isPaused, setIsPaused] = useState(false); const processedData = useMemo(() => return filterFn ? data.filter(filterFn) : data; , [data, filterFn]); useEffect(() => if (isPaused) return; const ws = new WebSocket(url); ws.onmessage = (event) => setData(prev => [...prev, JSON.parse(event.data)]); ; return () => ws.close(); , [url, isPaused]); Now any component can add debounced search with
function useFriendStatus(friendID) const [isOnline, setIsOnline] = useState(null); useDebugValue(isOnline ? 'Online' : 'Offline'); return isOnline; | Primitive Hook | Advanced Counterpart | Problem
Now in DevTools, your hook displays FriendStatus: "Online" instead of an opaque value. Consider a dashboard that subscribes to a WebSocket stream, processes messages with expensive filtering, and exposes controls to pause/resume.
| Primitive Hook | Advanced Counterpart | Problem Solved | |----------------|----------------------|----------------| | useState | useReducer | Complex state transitions with interdependent logic | | Inline functions | useCallback | Unnecessary child re-renders due to function recreation | | Expensive computations | useMemo | Recalculating derived data on every render | | useEffect + DOM reads | useLayoutEffect | Visual flicker or layout shifts | | Prop drilling | useContext + useReducer | Global state management without Redux | | Forwarding refs | useImperativeHandle | Exposing limited imperative methods | When a component’s state involves multiple sub-values or transitions that depend on previous state, useState becomes verbose and error-prone. useReducer shines here. Example: Form with validation, submission, and error states const formReducer = (state, action) => switch (action.type) case 'FIELD_CHANGE': return ...state, [action.field]: action.value, error: null ; case 'SUBMIT_LOADING': return ...state, isLoading: true, error: null ; case 'SUBMIT_SUCCESS': return ...state, isLoading: false, isSuccess: true ; case 'SUBMIT_ERROR': return ...state, isLoading: false, error: action.error ; default: return state; ; function AdvancedForm() const [state, dispatch] = useReducer(formReducer, email: '', password: '', isLoading: false, error: null, isSuccess: false, ); // ... dispatch calls are self-documenting