react

React — Advanced Patterns

For state management (Zustand/Redux), TanStack Query, React Hook Form, React Router, and component testing, see the frontend skill.

When to Activate

• Designing or debugging custom hooks
• Choosing between Context, Zustand, or prop drilling
• Using Suspense, error boundaries, or concurrent features (useTransition, useDeferredValue)
• Building compound components or headless/renderless components
• Working in Next.js App Router (Server Components, Server Actions, streaming)
• TypeScript generics, event types, or forwardRef patterns
• useRef, useImperativeHandle, portals, or advanced DOM integration

---

Hooks Deep Dive

useReducer — when useState gets complex

type State = { count: number; error: string | null; loading: boolean };
type Action =
  | { type: "increment" }
  | { type: "set_error"; payload: string }
  | { type: "reset" };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case "increment": return { ...state, count: state.count + 1 };
    case "set_error": return { ...state, error: action.payload, loading: false };
    case "reset":     return { count: 0, error: null, loading: false };
  }
}

const [state, dispatch] = useReducer(reducer, { count: 0, error: null, loading: false });
dispatch({ type: "increment" });

Use useReducer over useState when: multiple related state fields, next state depends on previous, or actions have semantic names that make logic readable.

useRef — three distinct uses

// 1. DOM access
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => { inputRef.current?.focus(); }, []);

// 2. Mutable value that doesn't trigger re-render (e.g. interval ID, previous value)
const timerRef = useRef<NodeJS.Timeout | null>(null);
const prevValueRef = useRef(value);
useEffect(() => { prevValueRef.current = value; });

// 3. Stable callback reference (avoids stale closure in event listeners)
const callbackRef = useRef(onSave);
useEffect(() => { callbackRef.current = onSave; });
useEffect(() => {
  const handler = () => callbackRef.current();
  window.addEventListener("keydown", handler);
  return () => window.removeEventListener("keydown", handler);
}, []); // dep array stays empty — no stale closure