React Native high priority events (investigation result by Devin)

react-native-high-priority-events.md

Based on my analysis of the React Native source code, I can provide you with concrete examples of high priority events that can run the render pipeline in the UI thread.

High Priority Events in React Native

From examining the React Native source code, I found that React Native uses a priority-based scheduling system with the following hierarchy (defined in <ref_file file="/home/ubuntu/repos/react-native/packages/react-native/ReactCommon/react/renderer/runtimescheduler/SchedulerPriorityUtils.h" />):

Priority Levels:

1. ImmediatePriority (value 1, timeout 0ms) - Highest priority
2. UserBlockingPriority (value 2, timeout 250ms) - Second highest priority
3. NormalPriority (value 3, timeout 5s)
4. LowPriority (value 4, timeout 10s)
5. IdlePriority (value 5, timeout 5min)

Concrete Examples of High Priority Events:

1. Discrete Touch Events (ImmediatePriority/UserBlockingPriority)

From the Touchable and Pressable components (<ref_file file="/home/ubuntu/repos/react-native/packages/react-native/Libraries/Components/Touchable/Touchable.js" /> and <ref_file file="/home/ubuntu/repos/react-native/packages/react-native/Libraries/Components/Pressable/Pressable.js" />):

• onPressIn - When a touch begins
• onPressOut - When a touch ends
• onPress - When a tap gesture is completed
• onLongPress - When a long press gesture is detected
• Gesture Responder Events - Touch start, move, and end events

2. Synchronous Work Scheduling (ImmediatePriority)

From <ref_file file="/home/ubuntu/repos/react-native/packages/react-native/ReactCommon/react/renderer/runtimescheduler/RuntimeScheduler_Modern.cpp" />:

• scheduleWork() method uses SchedulerPriority::ImmediatePriority (line 47)
• executeNowOnTheSameThread() uses SchedulerPriority::ImmediatePriority (line 156)

How High Priority Events Trigger UI Thread Rendering:

The React Native threading model documentation you referenced shows "Discrete event interruption" as a scenario where high priority events can execute the render pipeline synchronously on the UI thread.

From the source code analysis:

1. Event Loop Integration: The <ref_snippet file="/home/ubuntu/repos/react-native/packages/react-native/ReactCommon/react/renderer/runtimescheduler/RuntimeScheduler_Modern.cpp" lines="352-379" /> shows the updateRendering() method that gets called after high priority tasks execute.

2. Immediate Execution: High priority events with ImmediatePriority have a 0ms timeout, meaning they execute immediately without yielding to other tasks.

3. UI Thread Synchronization: The executeNowOnTheSameThread() method allows synchronous execution on the UI thread for critical events.

Key Implementation Details:

• Touch Events: Classified as discrete events that can interrupt the normal render pipeline
• Gesture Recognition: Touch start, move, and end events are processed with high priority to ensure responsive user interactions
• Immediate Scheduling: Critical UI updates use ImmediatePriority to bypass the normal scheduling queue

The React Native architecture ensures that user interaction events like touches, taps, and gestures receive the highest priority to maintain a responsive user interface, allowing them to interrupt ongoing render work and execute synchronously on the UI thread when necessary.

prompt:

I'm analyzing the behavior of react-native runtime. Assist me.

Source code: https://github.com/facebook/react-native

Document I'm referencing: https://reactnative.dev/architecture/threading-model

This document depicts that high priority events can run render pipeline in the UI thread. What exactly are the high priority events? Tell me concrete examples.