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();
return results, isLoading ;
In the modern React ecosystem, hooks have revolutionized how we build components. Most developers are comfortable with the basics: useState for local state, useEffect for side effects, and useContext for dependency injection. But as applications grow in complexity, relying solely on these primitive hooks leads to tangled logic, performance bottlenecks, and hard-to-debug re-renders. advanced hook
| 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 | 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. dispatch calls are self-documenting Now in DevTools, your