React patterns & Hooks

Custom Hooks and Context+Reducer State Management

// Custom Hook design: useAsync — encapsulate async request state
function useAsync<T>(asyncFn: () => Promise<T>, deps: React.DependencyList) {
  const [state, dispatch] = React.useReducer(asyncReducer<T>, {
    status: 'idle', data: null, error: null
  });

  React.useEffect(() => {
    let cancelled = false;  // prevent race conditions
    dispatch({ type: 'LOADING' });
    asyncFn().then(
      data => { if (!cancelled) dispatch({ type: 'SUCCESS', data }); },
      error => { if (!cancelled) dispatch({ type: 'ERROR', error }); }
    );
    return () => { cancelled = true; };  // cleanup: cancel on unmount or dep change
  }, deps);   // eslint: exhaustive-deps

  return state;
}

// useDebounce: debounce a value to avoid rapid API calls
function useDebounce<T>(value: T, delayMs: number): T {
  const [debounced, setDebounced] = React.useState(value);
  React.useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delayMs);
    return () => clearTimeout(timer);  // clear previous timer
  }, [value, delayMs]);
  return debounced;
}

// Context + Reducer: lightweight global state without Redux
type CartAction =
  | { type: 'ADD_ITEM'; item: CartItem }
  | { type: 'REMOVE_ITEM'; id: string }
  | { type: 'CLEAR' };

function cartReducer(state: CartState, action: CartAction): CartState {
  switch (action.type) {
    case 'ADD_ITEM':
      return { ...state, items: [...state.items, action.item] };
    case 'REMOVE_ITEM':
      return { ...state, items: state.items.filter(i => i.id !== action.id) };
    case 'CLEAR':
      return { items: [] };
  }
}

// Split state and dispatch into separate Contexts to avoid unnecessary re-renders
const CartStateCtx = React.createContext<CartState | null>(null);
const CartDispatchCtx = React.createContext<React.Dispatch<CartAction> | null>(null);

export function CartProvider({ children }) {
  const [state, dispatch] = React.useReducer(cartReducer, { items: [] });
  return (
    <CartStateCtx.Provider value={state}>
      <CartDispatchCtx.Provider value={dispatch}>
        {children}
      </CartDispatchCtx.Provider>
    </CartStateCtx.Provider>
  );
}

• Single responsibility: one primary exported component per file by default; split complex UI into children or colocated private modules—avoid thousand-line JSX files.
• Compound components: parent shares implicit state via Context or explicit child APIs (e.g. Tabs.Tab) with a stable external contract.
• Controlled wrappers: unify value/onChange shape at library boundaries; avoid half-controlled mixes that tear state.

Composition and slots

Prefer children, render props, or explicit slot props over long conditional trees of child type strings in the parent. The SKILL can require “extension points” to be exposed only through composition for typing and test doubles.

              ┌──────────────────┐
              │     Parent       │
              │  state / data    │
              └────────┬─────────┘
                       │ props.children / render prop / named slots
              ┌────────┴────────┐
              ▼                 ▼
       ┌────────────┐   ┌────────────┐
       │  Region A  │   │  Region B  │
       │ (display)  │   │ (list/form)│
       └────────────┘   └────────────┘
                       │
              Optional: shared implicit state via small Context

Render props suit “same logic, different UI”; when children is a function, type the parameters explicitly to avoid implicit any in generated code.

Performance Optimization, Error Boundaries, and Suspense

// useMemo / useCallback: avoid expensive recalculations and unstable references
function ProductList({ products, filter }: Props) {
  // ✅ filteredProducts recalculated only when products or filter changes
  const filtered = React.useMemo(
    () => products.filter(p => p.category === filter),
    [products, filter]
  );

  // ✅ handleClick is stable — won't cause unnecessary child re-renders
  const handleClick = React.useCallback((id: string) => {
    router.push(`/product/${id}`);
  }, []);  // depends on no component state, so deps array is empty

  return <List items={filtered} onItemClick={handleClick} />;
}

// Error Boundary: catch render errors in the component tree
class ErrorBoundary extends React.Component<
  { fallback: React.ReactNode; children: React.ReactNode },
  { hasError: boolean; error: Error | null }
> {
  state = { hasError: false, error: null };

  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, info: React.ErrorInfo) {
    logger.error(error, info.componentStack);  // report to monitoring service
  }

  render() {
    return this.state.hasError ? this.props.fallback : this.props.children;
  }
}

// Suspense + React.lazy: code-split heavy components for faster initial load
const DataChart = React.lazy(() => import('./DataChart'));

function Dashboard() {
  return (
    <ErrorBoundary fallback={<ErrorFallback />}>
      <React.Suspense fallback={<Skeleton />}>
        <DataChart />
      </React.Suspense>
    </ErrorBoundary>
  );
}

• Dependency arrays: use exhaustive-deps for useEffect/useMemo/useCallback; missing deps cause stale closures, while inline objects/arrays in deps cause extra runs—stabilize references first.
• Effect purpose: synchronize with external systems (subscriptions, DOM, non-React stores); if an event handler, derived value, or key reset solves it, do not use an effect.
• Cleanup: unsubscribe and clear timers in cleanup; Strict Mode in dev may double-mount effects to surface missing cleanup.
• Performance hooks: do not wrap everything in useMemo/useCallback by default; add when child memo depends on referential equality or when values are deps of other Hooks, and comment why.

In-page tools: dependency explainer and Hooks quiz

The script below runs only on this page to clarify useEffect dependency semantics and reinforce Hook rules (not a linter replacement).

SKILL outline