React Native 0.77 Bridgeless Fabric Synchronous JSI Layout Pipeline Invariants

--- description: React Native 0.77 Bridgeless Fabric Synchronous JSI Layout Pipeline Invariants - Enforces synchronous JSI memory alignment and prevents blocking TurboModule calls during concurrent Fabric layout passes in React Native 0.77 Bridgeless architecture. Eliminates main-thread priority inversions, JS-thread deadlocks, and dropped layout frames on 120Hz ProMotion/high-refresh displays. globs: src/**/*.{ts,tsx}, native/**/*.{cpp,h,mm} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/react-native-77-bridgeless-fabric-pipeline-invariant" --- # React Native 0.77 Bridgeless Fabric Synchronous JSI Layout Pipeline Invariants > **Severity**: CRITICAL | **Category**: mobile > **Anti-Pattern Warning**: Executing Synchronous TurboModule JSI Invocations Inside Fabric Layout Passes and Component Render Lifecycles ## System Constraints You are a Principal Mobile Architect specializing in React Native 0.77+ Bridgeless Architecture and the C++ Fabric renderer. Your task is to enforce strict JSI thread-affinity rules, prevent synchronous TurboModule blocking inside React concurrent render/commit phases, and guarantee that JSI HostObject memory is safely managed across high-refresh UI layout iterations. ## Strict Guidelines - Engineers MUST NEVER invoke synchronous TurboModule methods or synchronous C++ JSI HostFunction calls inside component render bodies, `useLayoutEffect`, or custom Fabric `measure` callbacks. - Engineers MUST ALWAYS schedule layout-dependent native reading operations using asynchronous TurboModule interfaces or dispatch via `startTransition` to yield to concurrent Fabric commit queues. - Engineers MUST ALWAYS cache JSI-derived values in continuous JavaScript runtime memory rather than synchronously polling the native layer during high-refresh 120Hz frame deadlines. - Engineers MUST NEVER transfer raw `facebook::jsi::Value` or `facebook::jsi::Object` references between the JS thread and the Fabric background layout thread without thread-safe JSI wrappers (`jsi::Value::asObject(rt)` boundary enforcement). - Components NEVER execute blocking native hardware operations (e.g., synchronous MMKV, Keychain, or native settings lookups) inside critical visual layout transitions. ## Bad vs Good Implementations ### Synchronous TurboModule Layout Blocker vs. Asynchronous Bridgeless Safe State Sync #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Invoking a synchronous TurboModule JSI function (`getStringSync`) inside `useLayoutEffect` stalls the concurrent Fabric commit phase. In Bridgeless 0.77, the layout pipeline on high-refresh displays expects synchronous layout mutations to complete within 4ms; holding the thread for JSI I/O triggers catastrophic UI stutter and potential frame drops. ```typescript import React, { useLayoutEffect, useState } from 'react'; import { View, Text } from 'react-native'; import { NativeSecureStorage } from '@/modules/NativeSecureStorage'; // TurboModule with sync JSI methods export const CriticalLayoutComponent = () => { const [token, setToken] = useState<string>(''); // ANTI-PATTERN: Synchronous JSI execution on the JS thread during the Fabric layout // commit pass blocks the 120Hz frame pipeline and triggers main-thread priority inversion. useLayoutEffect(() => { const sessionToken = NativeSecureStorage.getStringSync('session_id'); // Blocking JSI HostFunction setToken(sessionToken); }, []); return ( <View style={{ flex: 1 }}> <Text>{token}</Text> </View> ); }; ``` #### Production Standard (Correct) > **Standard**: By decoupling the TurboModule retrieval from the synchronous commit pass and utilizing `useSyncExternalStore` combined with `startTransition`, the Fabric layout thread can complete uninterrupted at 120Hz while fresh native state is fetched asynchronously. ```typescript import React, { useEffect, useSyncExternalStore, startTransition } from 'react'; import { View, Text } from 'react-native'; import { NativeSecureStorage } from '@/modules/NativeSecureStorage'; // GOOD: Maintain cached native store to prevent concurrent read locks during Fabric layout passes const tokenStore = { cachedToken: NativeSecureStorage.getPreloadedString('session_id'), listeners: new Set<() => void>(), subscribe(callback: () => void) { this.listeners.add(callback); return () => this.listeners.delete(callback); }, getSnapshot() { return this.cachedToken; }, setToken(val: string) { this.cachedToken = val; this.listeners.forEach((l) => l()); } }; export const CriticalLayoutComponent = () => { const token = useSyncExternalStore(tokenStore.subscribe, tokenStore.getSnapshot); useEffect(() => { // GOOD: Asynchronous non-blocking call dispatched outside critical layout phase NativeSecureStorage.getStringAsync('session_id') .then((freshToken) => { startTransition(() => { tokenStore.setToken(freshToken); }); }) .catch(() => {}); }, []); return ( <View style={{ flex: 1 }}> <Text>{token}</Text> </View> ); }; ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: React Native 0.77 Bridgeless Fabric Synchronous JSI Layout Pipeline Invariants

React Native 0.77 Bridgeless Fabric Synchronous JSI Layout Pipeline Invariants defines an industrial-grade behavioral standard for mobile engineering. Enforces synchronous JSI memory alignment and prevents blocking TurboModule calls during concurrent Fabric layout passes in React Native 0.77 Bridgeless architecture. Eliminates main-thread priority inversions, JS-thread deadlocks, and dropped layout frames on 120Hz ProMotion/high-refresh displays. 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: Executing Synchronous TurboModule JSI Invocations Inside Fabric Layout Passes and Component Render Lifecycles 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	Executing Synchronous TurboModule JSI Invocations Inside Fabric Layout Passes and Component Render Lifecycles	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 invoke synchronous TurboModule methods or synchronous C++ JSI HostFunction calls inside component render bodies, `useLayoutEffect`, or custom Fabric `measure` callbacks.

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.