This custom hook elegantly solves the "compare current vs previous" problem without extra state. Sometimes a parent component needs to call a child’s method (e.g., focus an input, reset a form, start an animation). While React discourages imperative code, advanced cases justify it.
Now go forth, abstract wisely, and may your dependency arrays always be complete. advanced hook
function useFriendStatus(friendID) const [isOnline, setIsOnline] = useState(null); useDebugValue(isOnline ? 'Online' : 'Offline'); return isOnline; This custom hook elegantly solves the "compare current
| 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 Now go forth, abstract wisely, and may your
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 two lines of code. Custom hooks compose other advanced hooks, hiding complexity beautifully. Even advanced developers fall into traps: