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

Context vs Prop Drilling Tradeoffs

Prop drilling is fine within a small feature boundary. Use context when many branches need shared read access, but control re render blast radius with split contexts and stable values.
On this page

Decision Frame

  • Prop drilling is a dependency injection mechanism: explicit, testable, local.
  • Context is a broadcast mechanism: convenient, but it expands coupling and re render scope.
  • Production rule: choose based on boundary size, update frequency, and ownership.

When Prop Drilling Is the Right Choice

  • Inside a small cohesive feature boundary (page module, feature folder).
  • Only a few layers need to pass the value and the chain is stable.
  • You want explicit dependencies for tests and refactors.
  • Updates are frequent and you want tight render control.

When Context Is the Right Choice

  • Many branches need the same read access (auth, theme, locale, feature flags).
  • The dependency is cross cutting and would create many parallel prop chains.
  • You can keep the context value stable and split by responsibility.

The Hidden Cost of Context

  • Context increases coupling: consumers can appear anywhere in the tree.
  • Context updates can trigger wide re renders if value changes often.
  • Mega contexts create large blast radius and make incidents harder to isolate.

Operational Rules for Context

  • Keep context scope minimal and responsibility single.
  • Split contexts by update frequency (high churn vs low churn).
  • Memoize provider values when they are objects or include callbacks.
  • Expose a safe hook that enforces provider presence.

Example: Safe Context Hook

type ThemeValue = { mode: "light" | "dark" };

const ThemeContext = React.createContext<ThemeValue | null>(null);

function useTheme(): ThemeValue {
  const v = React.useContext(ThemeContext);
  if (!v) throw new Error("ThemeProvider missing");
  return v;
}

Example: Stable Provider Value

function ThemeProvider({ mode, children }: { mode: "light" | "dark"; children: React.ReactNode }) {
  const value = React.useMemo(() => ({ mode }), [mode]);
  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
}

Prop Drilling Alternative: Feature API Prop

  • Instead of drilling many props, drill one feature object with intent methods.
  • This keeps explicit wiring while reducing parameter noise.

Failure Modes

  • Context used for server state, causing caching and invalidation chaos.
  • Provider value recreated each render, triggering wide re renders.
  • Mega context merges unrelated concerns and couples features.
  • Prop drilling across unrelated layers creates forwarding components that do not understand props.

Decision Checklist

  • Is this dependency cross cutting or feature local?
  • How frequently does it update?
  • Can we split contexts by responsibility and churn?
  • Will explicit props improve testability and refactoring safety?
  • Is the provider value stable and memoized?
Compound Components Pattern →