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

Avoiding any and Unsafe Casts

Treat any and unsafe casts as production defects. Replace assertions with validation and narrowing, enforce boundary checks, and remove unknown as T patterns that hide runtime failures.
On this page

Why any Is a Production Problem

  • any disables safety and allows invalid states to flow through the system.
  • Most runtime crashes in typed apps are caused by boundary casts and unchecked external data.
  • Production rule: no any at boundaries and no unknown as T without validation.

Common Sources of any

  • JSON parsing and API responses.
  • Third party libraries without types.
  • Loose event handler signatures.
  • Incremental migrations that never removed temporary casts.

Replace Casts with Narrowing

function isRecord(x: unknown): x is Record<string, unknown> {
  return typeof x === "object" && x !== null;
}

function getString(x: Record<string, unknown>, k: string): string {
  const v = x[k];
  if (typeof v !== "string") throw new Error("invalid");
  return v;
}

Example: Safe Parsing Pattern

type UserVM = { id: string; name: string };

function parseUserVM(x: unknown): UserVM {
  if (!isRecord(x)) throw new Error("invalid");
  return { id: getString(x, "id"), name: getString(x, "name") };
}

Operational Controls

  • Enable strict TypeScript settings.
  • Use lint rules to ban explicit any.
  • Centralize parsing and mapping at API boundaries.
  • Fail fast on invalid data with explicit error state.

Failure Modes

  • unknown as T used as a shortcut and invalid data enters UI state.
  • Any spreads through props and reduces type signal across the tree.
  • Runtime crashes occur far from the source, making incidents hard to debug.

Incident Triage Checklist

  • Search for any, unknown as, and large type assertions.
  • Inspect API boundary mapping functions.
  • Add runtime guards where data enters the system.
  • Convert boolean soup to unions to restore invariants.
Type-Safe Context API →