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

Role Based UI Control

UI authorization improves UX but never replaces server enforcement. Learn role and permission modeling, capability driven rendering, and failure modes like privilege confusion and stale permission caches.
On this page

Security Boundary

  • Server enforces authorization. UI only controls visibility and user flow.
  • UI must assume attackers can modify client code and requests.
  • Production rule: UI gating is for usability and error reduction, not security.

Role vs Permission vs Capability

  • Role: coarse grouping of permissions (admin, member).
  • Permission: specific allowed action (billing.write).
  • Capability: boolean decisions derived from role plus context (canEditInvoice).
  • Production rule: render based on capabilities for clarity and stability.

Capability Map Pattern

  • Compute capabilities once per session from identity and organization context.
  • Expose a small API to UI components.
  • Avoid spreading role checks across the entire component tree.

Example: Capability Computation

type Identity = {
  userId: string;
  role: "admin" | "member";
  perms: string[];
};

type Capabilities = {
  canManageUsers: boolean;
  canWriteBilling: boolean;
};

function computeCaps(id: Identity): Capabilities {
  const has = (p: string) => id.role === "admin" || id.perms.includes(p);
  return {
    canManageUsers: has("users.manage"),
    canWriteBilling: has("billing.write"),
  };
}

Example: Capability Driven Rendering

function BillingActions({ caps }: { caps: { canWriteBilling: boolean } }) {
  if (!caps.canWriteBilling) return null;
  return <button>Create invoice</button>;
}

Staleness and Refresh

  • Permissions can change during a session.
  • Define refresh policy: on login, on org change, on token refresh, and periodic recheck.
  • UI must handle downgrade and revoke events predictably.

Failure Modes

  • Privilege confusion from scattered role checks and inconsistent logic.
  • Stale permission cache after role change, UI shows actions that will fail.
  • Front end enforcement assumed as security, leading to server gaps.
  • Over complex rules embedded in UI, hard to audit and test.

Production Checklist

  • Server enforces authorization for every sensitive endpoint.
  • UI uses capability map, not scattered role checks.
  • Capabilities refresh is defined and tested.
  • Downgrade and revoke flows are handled cleanly.
API Integration Patterns →