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

Lists, Keys, and Reconciliation

Keys define identity during reconciliation. Use stable keys to prevent remounts, lost focus, and state leaking across rows in dynamic lists.
On this page

What Keys Actually Do

  • Keys are React's identity labels for siblings under the same parent.
  • React preserves instances based on type + key.
  • If identity changes, React remounts: state resets, effects restart, DOM may be replaced.

Operational Rules

  • Keys must be unique within the list scope.
  • Keys must be stable across reorder/filter/insert/delete.
  • Prefer database IDs. If you lack IDs, create stable IDs at ingestion time, not at render time.
  • Avoid index keys for dynamic lists.

Reconciliation Outcomes

  • Same key + same type: instance preserved (state and DOM reused).
  • Key changes: instance replaced (state reset + remount).
  • Wrong key reuse: state attaches to the wrong row (high-severity bug).

Bad vs Good Examples

function Row({ user }) {
  return (
    <div>
      <input defaultValue={user.name} />
    </div>
  );
}

// ❌ Bad: index key breaks identity when list changes
users.map((u, i) => <Row key={i} user={u} />);

// ✅ Good: stable unique key
users.map((u) => <Row key={u.id} user={u} />);

Failure Modes

  • Inputs swap values after sort/filter because index keys reassigned identity.
  • Focus loss while typing because DOM node was replaced.
  • Row state leaks (expanded/selected/editing) to a different row.
  • Animation glitches due to remounts rather than moves.

Debug Playbook

  • Symptom: input jumps / loses focus → check list key strategy first.
  • Temporarily render the key next to each row to verify stability across operations.
  • Verify no duplicate keys exist after filtering/pagination.
  • Ensure keys are not derived from mutable fields (name/email).

Code Review Checklist

  • No index keys in dynamic lists.
  • Keys come from stable IDs or stable generated identifiers.
  • Reorder operations do not change keys.
  • Editable rows keep stable identity during optimistic updates.
Forms and Controlled Components →