React 19 Concurrent Interruption Resource Disposal Standard

Enforces strict passive allocation paradigms in React 19 concurrent mode to eliminate leaks of unmanaged browser primitives (WebGL contexts, Web Workers, Observers, and SharedArrayBuffers). In React 19, concurrent render passes can yield, suspend, or abort before mounting; any side effects or allocations initiated during the render phase bypass commit cleanup, accumulating uncollected GPU/OS-level handles. All lifecycle allocations must be deferred strictly to passive commit phases (useEffect) or wrapped in idempotent cleanup abstractions guarded against discarded frames.

--- description: React 19 Concurrent Interruption Resource Disposal Standard - Enforces strict passive allocation paradigms in React 19 concurrent mode to eliminate leaks of unmanaged browser primitives (WebGL contexts, Web Workers, Observers, and SharedArrayBuffers). In React 19, concurrent render passes can yield, suspend, or abort before mounting; any side effects or allocations initiated during the render phase bypass commit cleanup, accumulating uncollected GPU/OS-level handles. All lifecycle allocations must be deferred strictly to passive commit phases (useEffect) or wrapped in idempotent cleanup abstractions guarded against discarded frames. globs: src/**/*.{ts,tsx} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/react-19-concurrent-resource-disposal-guardrail" --- # React 19 Concurrent Interruption Resource Disposal Standard > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Eager Resource Allocation During Concurrent Render Passes Without Deferred Commit Lifecycle Guards ## System Constraints You are a Principal Engineer enforcing the React 19 Concurrent Interruption Resource Disposal Guardrail. React 19 allows concurrent renders to pause, yield, abort, or re-run speculatively. You must reject any instantiation of stateful browser primitives (such as new Worker(), canvas.getContext('webgl2'), ResizeObserver, IntersectionObserver, AudioContext, or BroadcastChannel) inside the component body, render phase, useMemo, or useState initializers. All unmanaged resource lifecycles must be initiated inside commit-phase passive effects (useEffect) and return explicit, idempotent cleanup functions that immediately invalidate outstanding promises, abort message listeners, lose WebGL contexts via WEBGL_lose_context, and terminate active workers. ## Strict Guidelines - Engineers MUST NEVER allocate unmanaged native resources (new Worker, getContext('webgl'), new ResizeObserver, new AudioContext) inside the component render body, useMemo, or useState initializers. - Engineers MUST ALWAYS initialize external resources inside useEffect, ensuring an immediate synchronous teardown function is returned to handle rapid mount/unmount interleaving. - Engineers MUST ALWAYS invoke extension.loseContext() or gl.getExtension('WEBGL_lose_context')?.loseContext() on WebGL tear-down to immediately reclaim native GPU resources rather than waiting for garbage collection. - Engineers MUST ALWAYS call worker.terminate() and observer.disconnect() inside cleanup callbacks, invalidating pending message queues and preventing stale event propagation. - Components NEVER store instantiated native resources in module-level global variables or unsynced mutable React refs outside an explicit lifecycle boundary. - Async operations inside useEffect MUST check an active cancellation token or AbortController.signal before applying results to component state to prevent updating discarded fiber trees. ## Bad vs Good Implementations ### WebGL Context and Worker Allocation in React 19 #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Instantiating a Web Worker or WebGL context inside useMemo or the render phase violates concurrent invariants. When a concurrent transition yields or is superseded, React discards the fiber tree without invoking cleanup hooks, leaving active OS threads and allocated GPU memory orphaned. ```typescript import React, { useRef, useMemo } from 'react'; interface CanvasProps { workerScriptUrl: string; } export const CanvasRenderer: React.FC<CanvasProps> = ({ workerScriptUrl }) => { const canvasRef = useRef<HTMLCanvasElement | null>(null); // ANTI-PATTERN: Eager allocation in useMemo or render pass. // In React 19 concurrent mode, if rendering is interrupted or aborted before commit, // this Worker and any attached WebGL contexts are never cleaned up, causing severe OS leaks. const worker = useMemo(() => new Worker(workerScriptUrl), [workerScriptUrl]); return <canvas ref={canvasRef} />; }; ``` #### Production Standard (Correct) > **Standard**: All heavy resources are initialized inside useEffect, which only executes after React has committed the fiber to the DOM. The returned cleanup function idempotently terminates the worker, disconnects observers, and explicitly calls loseContext() on the WebGL context, ensuring zero memory leaks during rapid concurrent route transitions. ```typescript import React, { useRef, useEffect } from 'react'; interface CanvasProps { workerScriptUrl: string; } export const CanvasRenderer: React.FC<CanvasProps> = ({ workerScriptUrl }) => { const canvasRef = useRef<HTMLCanvasElement | null>(null); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const worker = new Worker(workerScriptUrl); const gl = canvas.getContext('webgl2'); const loseContextExt = gl?.getExtension('WEBGL_lose_context'); const observer = new ResizeObserver((entries) => { for (const entry of entries) { worker.postMessage({ type: 'RESIZE', width: entry.contentRect.width, height: entry.contentRect.height, }); } }); observer.observe(canvas); return () => { // Teardown is guaranteed to execute post-commit observer.disconnect(); worker.terminate(); if (loseContextExt) { loseContextExt.loseContext(); } }; }, [workerScriptUrl]); return <canvas ref={canvasRef} />; }; ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: React 19 Concurrent Interruption Resource Disposal Standard

React 19 Concurrent Interruption Resource Disposal Standard defines an industrial-grade behavioral standard for frontend engineering. Enforces strict passive allocation paradigms in React 19 concurrent mode to eliminate leaks of unmanaged browser primitives (WebGL contexts, Web Workers, Observers, and SharedArrayBuffers). In React 19, concurrent render passes can yield, suspend, or abort before mounting; any side effects or allocations initiated during the render phase bypass commit cleanup, accumulating uncollected GPU/OS-level handles. All lifecycle allocations must be deferred strictly to passive commit phases (useEffect) or wrapped in idempotent cleanup abstractions guarded against discarded frames. Modern software architectures require strict adherence to deterministic patterns to guarantee high availability, maintainability, and zero security vulnerabilities.

Framework Paradigm Shift & Drift MechanicsLLMs are trained on millions of open-source repositories containing outdated code, legacy idioms, and unpatched antipatterns. When coding assistants generate implementations for this stack, they default to common statistical tokens: Eager Resource Allocation During Concurrent Render Passes Without Deferred Commit Lifecycle Guards Without an explicit system instruction file, developers spend hours debugging silent failures.

Failure Modes & Production Blast Radius

Hazard Analysis: What Breaks Without This Rule

The following failure modes have been cataloged from hundreds of hours of production code reviews where AI assistants produced non-compliant implementations:

Failure Mode	AI Symptom (The Anti-Pattern)	Severity	Production Impact & Remedy
AI Hallucination & Deprecation Drift	Eager Resource Allocation During Concurrent Render Passes Without Deferred Commit Lifecycle Guards	Critical	Violating this industrial standard introduces regression bugs, security risks, and unexpected runtime failures in production. Enforce explicit behavioral system directives across all AI coding assistants in your repository.
Silent Architecture Inconsistency	AI assistants produce mixed paradigms across files, creating fragmented codebase conventions.	Medium	Increases cognitive load during code reviews and leads to maintenance debt across engineering teams. Pin project conventions in .cursor/rules, CLAUDE.md, and AGENTS.md so all team agents follow identical guardrails.

Architectural Directives in Detail

Step-by-Step Production Directives

Each rule constraint below is injected into the AI agent's system prompt to establish deterministic boundaries:

Engineers MUST NEVER allocate unmanaged native resources (new Worker, getContext('webgl'), new ResizeObserver, new AudioContext) inside the component render body, useMemo, or useState initializers.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.