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

Type-Safe Context API

Type context values and enforce provider usage with a safe hook. Avoid nullable context sprawl, reduce re render blast radius, and prevent accidental coupling via mega contexts.
On this page

What Context Is For

  • Cross cutting concerns used by many components: auth, theme, locale, feature flags.
  • Not a general replacement for props or a global store.
  • Production rule: keep context scope small and value stable.

Type Safe Context Pattern

  • Create context with a nullable type.
  • Expose a hook that throws if the provider is missing.
  • This removes scattered null checks and fails fast in development and tests.

Example: Safe Hook

type AuthContextValue = {
  userId: string;
  logout: () => void;
};

const AuthContext = React.createContext<AuthContextValue | null>(null);

export function useAuth(): AuthContextValue {
  const v = React.useContext(AuthContext);
  if (!v) throw new Error("AuthProvider missing");
  return v;
}

Provider Value Stability

  • Provider values are often objects. Recreating them each render can re render all consumers.
  • Memoize provider values when they contain objects or callbacks.

Example: Memoized Provider Value

function AuthProvider({ userId, children }) {
  const logout = React.useCallback(() => {
    // logout logic
  }, []);

  const value = React.useMemo(() => {
    return { userId, logout };
  }, [userId, logout]);

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

Split by Update Frequency

  • One context that changes frequently can trigger wide re renders.
  • Split contexts so high frequency updates do not impact low frequency consumers.

Failure Modes

  • Nullable context used directly, causing null checks everywhere.
  • Mega context includes many unrelated values and re renders large parts of the tree.
  • Provider value recreated every render, causing unnecessary re renders.
  • Context used for request data and server state, leading to caching and invalidation issues.

Production Checklist

  • Context scope is small and clear.
  • Safe hook enforces provider presence.
  • Provider values are stable and memoized where needed.
  • Contexts are split by responsibility and update frequency.
Failure Modes in React + TypeScript →