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

Side Effects with useEffect

useEffect synchronizes React with external systems. Learn dependency correctness, cleanup discipline, and race-safe async patterns to prevent infinite loops, leaks, and stale results.
On this page

When useEffect Is the Right Tool

  • Synchronizing with external systems: network, subscriptions, timers, DOM APIs.
  • Not for computing values that can be derived during render.
  • Not for orchestrating complex UI state machines without explicit modeling.

Dependency Arrays (The Production Rules)

  • Dependencies must include everything read from the outer scope that affects the effect.
  • Missing dependencies cause stale reads and non-deterministic behavior.
  • Incorrect dependencies cause loops and excess work.

Cleanup Discipline

  • Always cleanup subscriptions, intervals, and listeners.
  • Cleanup runs before re-running the effect and on unmount.

Example: Timer with Cleanup

React.useEffect(() => {
  const id = setInterval(() => {
    console.log('tick');
  }, 1000);

  return () => clearInterval(id);
}, []);

Async Effects: Race-Safe Pattern

  • Requests can complete out of order; you must ignore stale results.
  • Use an ignore flag or AbortController depending on your fetch stack.

Example: Ignore Stale Responses

React.useEffect(() => {
  let ignore = false;

  async function load() {
    try {
      const res = await fetch(`/api/users?q=${encodeURIComponent(query)}`);
      const data = await res.json();
      if (!ignore) setUsers(data);
    } catch (e) {
      if (!ignore) setError(String(e));
    }
  }

  load();
  return () => { ignore = true; };
}, [query]);

Failure Modes

  • Infinite loops: effect sets state that changes a dependency on every run.
  • Stale closures: missing deps cause effect to read old values.
  • Memory leaks: missing cleanup for subscriptions/timers.
  • Race conditions: late responses overwrite fresh state.
  • Double fetch: repeated fetches triggered by unstable dependencies (inline objects/functions).

Incident Triage Checklist

  • Is the dependency array correct and complete?
  • Is there a cleanup for any long-lived resource?
  • Does async logic ignore/cancel stale requests?
  • Are dependencies stable (no inline object/function churn)?
Event Handling Patterns →