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

Portal Architecture

Portals render UI outside the parent DOM tree while keeping React ownership. Learn modal and overlay architecture, focus management boundaries, and production pitfalls like z index chaos and event propagation surprises.
On this page

What a Portal Is

  • A portal renders children into a different DOM container.
  • React ownership remains the same: events still bubble through React tree.
  • Primary use cases: modals, tooltips, toasts, overlays.

Why Portals Matter

  • Escape overflow hidden and stacking context constraints.
  • Centralize overlay layering rules.
  • Enable consistent focus and scroll locking behavior.

Modal Infrastructure Rules

  • One root container for overlays, mounted once.
  • Centralize z index policy to avoid local z index escalation.
  • Lock scroll for body during modal open.
  • Trap focus inside the modal and restore focus on close.

Example: Portal Root

function getPortalRoot() {
  let el = document.getElementById("portal-root");
  if (!el) {
    el = document.createElement("div");
    el.id = "portal-root";
    document.body.appendChild(el);
  }
  return el;
}

Example: Modal Using createPortal

import { createPortal } from "react-dom";

function Modal({ open, onClose, children }) {
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  if (!open) return null;

  return createPortal(
    <div role="dialog" aria-modal="true">
      <div>{children}</div>
      <button onClick={onClose}>Close</button>
    </div>,
    getPortalRoot()
  );
}

Event Propagation Notes

  • React events bubble through the React tree even when DOM is outside.
  • Use stopPropagation carefully, only for overlay click handling.

Failure Modes

  • Z index escalation chaos across features.
  • Overlay click closes modal unexpectedly due to event bubbling.
  • Scroll lock missing causing background scroll under modal.
  • Focus not trapped, keyboard navigation leaks to background.

Production Checklist

  • Single overlay root exists.
  • Z index policy documented and consistent.
  • Escape key and outside click behavior defined.
  • Scroll lock and focus restoration tested.
Large Scale Folder Structure →