React Native 0.76 Bridgeless Architecture Concurrent State Batching Standard

--- description: React Native 0.76 Bridgeless Architecture Concurrent State Batching Standard - Enforces synchronous C++ JSI direct-memory invocations and concurrent state batching invariants under React Native 0.76+ Bridgeless runtime. Eliminates frame-rate stutter, microtask starvation, and UI tearing caused by legacy asynchronous JSON bridge marshalling during continuous gesture and layout passes. Mandates typed TurboModules and React 18/19 concurrent transitions for cross-thread native-to-JS state reconciliation. globs: src/**/*.{ts,tsx}, native/**/*.{h,cpp,mm} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/react-native-bridgeless-concurrent-batching-standard" --- # React Native 0.76 Bridgeless Architecture Concurrent State Batching Standard > **Severity**: CRITICAL | **Category**: mobile > **Anti-Pattern Warning**: Invoking Legacy Bridge Callbacks and Asynchronous NativeModules inside High-Frequency Gesture Loops Causing State Tearing ## System Constraints You are a Principal Mobile Architect enforcing the React Native 0.76 Bridgeless Architecture and Concurrent State Batching Standard. React Native 0.76 defaults to Bridgeless Mode, deprecating the legacy asynchronous batched bridge. You must strictly enforce typed TurboModule JSI host objects for direct-memory C++ invocation, eliminate async serialization over the bridge, and ensure native-driven updates conform to concurrent batching invariants using React transitions to prevent UI tearing. ## Strict Guidelines - Engineers MUST ALWAYS invoke native capabilities via typed TurboModules using C++ JSI direct-memory access (`TurboModuleRegistry.getEnforcing<Spec>`) instead of legacy `NativeModules`. - Engineers MUST ALWAYS wrap non-urgent or high-frequency native state updates in `React.startTransition` to yield to the Fabric concurrent render pipeline and prevent frame drops. - Engineers MUST NOT dispatch asynchronous bridge callbacks or JSON-serialized bridge payloads inside continuous gestures, scroll events, or layout loops. - Code SHOULD read hardware and platform metrics synchronously through JSI host property getters (`jsi::Value`) rather than async `Promise` returns whenever required within a critical render path. - Components NEVER reconcile uncontrolled native state into local React state outside React's concurrent batching queue, preventing visual tearing and out-of-order commit phases. ## Bad vs Good Implementations ### High-Frequency Native Telemetry: Legacy Bridge vs. Bridgeless JSI TurboModule #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Accessing `NativeModules` triggers legacy compatibility layers in RN 0.76 Bridgeless mode. Passing serialized JSON strings causes thread hops and uncoordinated microtasks that interrupt Fabric's concurrent render commits, causing frame drops and visual state tearing. ```typescript import { NativeModules, View, Text } from 'react-native'; import React, { useEffect, useState } from 'react'; // ANTI-PATTERN: Relying on legacy NativeModules asynchronous bridge marshalling // causes JSON serialization overhead and microtask tearing under RN 0.76 Bridgeless runtime. const { GyroscopeSensorModule } = NativeModules; export const GyroscopeTracker = () => { const [coords, setCoords] = useState<{ x: number; y: number }>({ x: 0, y: 0 }); useEffect(() => { const sub = GyroscopeSensorModule.subscribe((data: string) => { // Parsing JSON strings across the legacy bridge queues unsynchronized microtasks const parsed = JSON.parse(data); setCoords({ x: parsed.x, y: parsed.y }); }); return () => sub.remove(); }, []); return <Text>X: {coords.x}, Y: {coords.y}</Text>; }; ``` #### Production Standard (Correct) > **Standard**: Uses `TurboModuleRegistry.getEnforcing<Spec>` to bypass legacy bridge serialization, executing via direct C++ JSI memory references. Telemetry dispatches are routed through `startTransition`, ensuring that Fabric's concurrent renderer batches native changes smoothly without dropping UI animation frames. ```typescript import React, { useEffect, useState, startTransition } from 'react'; import { Text } from 'react-native'; import { TurboModuleRegistry } from 'react-native'; import type { TurboModule } from 'react-native'; // INVARIANT: Strongly typed C++ TurboModule Spec binding directly to JSI export interface Spec extends TurboModule { readonly getSampleSynchronous: () => { x: number; y: number }; registerCallback(callback: (sample: { x: number; y: number }) => void): void; unregisterCallback(): void; } const NativeGyroscope = TurboModuleRegistry.getEnforcing<Spec>('GyroscopeSensorTurboModule'); export const GyroscopeTracker: React.FC = () => { const [coords, setCoords] = useState<{ x: number; y: number }>(() => NativeGyroscope.getSampleSynchronous()); useEffect(() => { NativeGyroscope.registerCallback((sample) => { // INVARIANT: Native updates wrapped in startTransition prevent concurrent commit tearing startTransition(() => { setCoords(sample); }); }); return () => { NativeGyroscope.unregisterCallback(); }; }, []); return <Text>X: {coords.x}, Y: {coords.y}</Text>; }; ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: React Native 0.76 Bridgeless Architecture Concurrent State Batching Standard

React Native 0.76 Bridgeless Architecture Concurrent State Batching Standard defines an industrial-grade behavioral standard for mobile engineering. Enforces synchronous C++ JSI direct-memory invocations and concurrent state batching invariants under React Native 0.76+ Bridgeless runtime. Eliminates frame-rate stutter, microtask starvation, and UI tearing caused by legacy asynchronous JSON bridge marshalling during continuous gesture and layout passes. Mandates typed TurboModules and React 18/19 concurrent transitions for cross-thread native-to-JS state reconciliation. 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: Invoking Legacy Bridge Callbacks and Asynchronous NativeModules inside High-Frequency Gesture Loops Causing State Tearing 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	Invoking Legacy Bridge Callbacks and Asynchronous NativeModules inside High-Frequency Gesture Loops Causing State Tearing	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 ALWAYS invoke native capabilities via typed TurboModules using C++ JSI direct-memory access (`TurboModuleRegistry.getEnforcing<Spec>`) instead of legacy `NativeModules`.

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.