Core Code
Core Code Modern Dev Handbook
REACT Contents
React Fundamentals
React Architecture Overview JSX and Rendering Model Component Design Principles Props and Data Flow State Management with useState Side Effects with useEffect Event Handling Patterns Conditional Rendering Strategies Lists, Keys, and Reconciliation Forms and Controlled Components Component Composition Lifting State and Shared State Basic Routing with React Router Failure Modes in Beginner React Apps
React + TypeScript
Typing Functional Components Typing Props and Children useState and Type Inference useReducer with Type Safety Typing Event Handlers Generic Components Utility Types in React Discriminated Unions for UI State Strict Mode and Null Safety API Response Typing Strategies Form Typing Patterns Avoiding any and Unsafe Casts Type-Safe Context API Failure Modes in React + TypeScript
React Advanced Patterns
Custom Hooks Architecture Context vs Prop Drilling Tradeoffs Compound Components Pattern Controlled vs Uncontrolled Abstractions Render Props and Pattern Alternatives State Machines in React Performance Optimization Playbook Memoization Strategies Code Splitting and Lazy Loading Error Boundaries and Recovery Portal Architecture Large Scale Folder Structure Testing Strategy: Unit and Integration Common React Anti Patterns
React Production
CSR vs SSR vs SSG Hydration and Mismatch Failures Next.js Architecture Overview App Router Deep Dive Authentication Patterns Token Storage Security Role Based UI Control API Integration Patterns Rate Limiting and UI Resilience Frontend Security Checklist XSS in Modern React Observability in Frontend Bundle Optimization Production Incident Playbook
Distributed Systems
Distributed System Fundamentals CAP Theorem in Practice Consistency Models Replication Strategies Leader Election Concepts Consensus Algorithms Overview Event Driven Architectures Message Queues and Delivery Guarantees Idempotency Patterns Saga Pattern Circuit Breakers Backpressure and Flow Control Observability in Distributed Systems Failure Scenarios and Postmortems

API Integration Patterns

Treat API integration as an adapter layer. Learn DTO to ViewModel mapping, consistent error normalization, retry and cancellation policy, and patterns that prevent waterfalls and state drift in production UIs.
On this page

Adapter Layer Model

  • UI should not call fetch everywhere.
  • Centralize API calls in a thin client module.
  • Map DTO to ViewModel before storing in UI state.

Core Contracts

  • Request: typed input, explicit headers and auth policy.
  • Response: validated DTO, mapped ViewModel.
  • Error: normalized shape across endpoints.
  • Telemetry: request id and timing attached for debugging.

Error Normalization Shape

type ApiError = {
  kind: "network" | "http" | "timeout" | "parse" | "auth";
  status?: number;
  message: string;
  fieldErrors?: Record<string, string>;
  requestId?: string;
};

Cancellation and Race Safety

  • Cancel in flight requests on route change when results are no longer relevant.
  • Ignore stale responses to prevent UI rollback.
  • Use single flight for deduped loads when multiple components request same data.

Example: AbortController Pattern

async function fetchJson(url: string, signal: AbortSignal) {
  const res = await fetch(url, { signal });
  if (!res.ok) throw new Error("http");
  return res.json();
}

function useUsers(query: string) {
  const [state, setState] = React.useState({ status: "loading" } as any);

  React.useEffect(() => {
    const ac = new AbortController();

    async function run() {
      try {
        const data = await fetchJson("/api/users?q=" + encodeURIComponent(query), ac.signal);
        setState({ status: "ready", data });
      } catch (e) {
        if (ac.signal.aborted) return;
        setState({ status: "error", message: String(e) });
      }
    }

    run();
    return () => ac.abort();
  }, [query]);

  return state;
}

Waterfall Prevention

  • Centralize route level data loading where possible.
  • Batch requests or load in parallel if there are no dependencies.
  • Avoid nested components each fetching its own data sequentially.

Failure Modes

  • DTO leakage into UI components causes breakage on backend rename.
  • Inconsistent error shapes create scattered error UI.
  • Stale responses overwrite newer state, causing flicker and rollback.
  • Retry without caps creates request storms during outages.

Production Checklist

  • API adapter layer exists and is the only place calling fetch.
  • DTO mapping and validation occurs before state updates.
  • Error normalization is consistent across endpoints.
  • Cancellation and stale response guards are implemented.
Rate Limiting and UI Resilience →