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

Form Typing Patterns

Keep form state separate from domain models. Use typed validators, structured error maps, and clear draft vs validated states to avoid Partial abuse and invalid domain objects in UI.
On this page

Form State Is Not Domain State

  • Form inputs are drafts and can be incomplete.
  • Domain models represent validated invariants.
  • Production rule: never reuse domain types for draft input state.

Recommended Modeling

  • FormState: all fields as strings or input friendly types.
  • Domain: validated types used by business logic and API calls.
  • Errors: structured map keyed by field name, plus a global message.

Example: Draft vs Domain

type SignupFormState = {
  email: string;
  password: string;
};

type SignupDomain = {
  email: string;
  passwordHash: string;
};

type FieldErrors = Partial<Record<keyof SignupFormState, string>>;

Typed Validation

function validateDraft(d: SignupFormState): { ok: true; value: SignupFormState } | { ok: false; errors: FieldErrors } {
  const errors: FieldErrors = {};

  if (!d.email.includes("@")) errors.email = "Invalid email";
  if (d.password.length < 8) errors.password = "Minimum length is 8";

  if (Object.keys(errors).length > 0) return { ok: false, errors };
  return { ok: true, value: d };
}

Submit Pipeline

  • Validate draft.
  • Map to API payload.
  • Send request with in flight guard.
  • Normalize server errors back into FieldErrors.

Failure Modes

  • Using Partial for domain types and allowing missing required fields.
  • Errors stored as unstructured strings that cannot map to fields.
  • Client validation differs from server, producing confusing UX.
  • Form state too broad causing re render lag.

Production Checklist

  • Form draft types are separate from domain models.
  • Validation produces structured errors.
  • Submit is guarded against double submit.
  • Server errors map to fields consistently.
Avoiding any and Unsafe Casts →