Fix for ScrollView race condition between C++ state update and onScroll

Summary:
Changelog: [internal]

There is a possibility of race between updating scrollview's state and virtualised list asking for layout of individual cells.
To make sure the race doesn't happen, state must be updated before dispatching onScroll event.

Android has implemented a different mechanism to tackle this issue in D28558380 (facebook@b161241).

Reviewed By: JoshuaGross

Differential Revision: D28642737

fbshipit-source-id: 33874beac69fc5a66eeb7f459fd89cd0b00dafcf

Author: sammy-SC

React/Base/RCTConstants.h

@@ -23,6 +23,12 @@ RCT_EXTERN void RCTExperimentSetOnDemandViewMounting(BOOL value);
 RCT_EXTERN BOOL RCTExperimentGetSendScrollEventToPaper(void);
 RCT_EXTERN void RCTExperimentSetSendScrollEventToPaper(BOOL value);
 
+/*
+ * Enables a fix for data race between state and scroll event.
+ */
+RCT_EXTERN BOOL RCTExperimentGetScrollViewEventRaceFix(void);
+RCT_EXTERN void RCTExperimentSetScrollViewEventRaceFix(BOOL value);
+
 /*
  * Preemptive View Allocation
  */

React/Base/RCTConstants.m

@@ -40,6 +40,21 @@ void RCTExperimentSetSendScrollEventToPaper(BOOL value)
   RCTExperimentSendScrollEventToPaper = value;
 }
 
+/*
+ * Enable fix for data race between state and scroll event.
+ */
+static BOOL RCTExperimentScrollViewEventRaceFix = NO;
+
+BOOL RCTExperimentGetScrollViewEventRaceFix()
+{
+  return RCTExperimentScrollViewEventRaceFix;
+}
+
+void RCTExperimentSetScrollViewEventRaceFix(BOOL value)
+{
+  RCTExperimentScrollViewEventRaceFix = value;
+}
+
 /*
  * Preemptive View Allocation
  */

React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm

@@ -88,6 +88,7 @@ @implementation RCTScrollViewComponentView {
 
   BOOL _isOnDemandViewMountingEnabled;
   BOOL _sendScrollEventToPaper;
+  BOOL _enableScrollViewEventRaceFix;
   CGPoint _contentOffsetWhenClipped;
   NSMutableArray<UIView<RCTComponentViewProtocol> *> *_childComponentViews;
 }
@@ -108,6 +109,7 @@ - (instancetype)initWithFrame:(CGRect)frame
 
     _isOnDemandViewMountingEnabled = RCTExperimentGetOnDemandViewMounting();
     _sendScrollEventToPaper = RCTExperimentGetSendScrollEventToPaper();
+    _enableScrollViewEventRaceFix = RCTExperimentGetScrollViewEventRaceFix();
     _childComponentViews = [[NSMutableArray alloc] init];
 
     _scrollView = [[RCTEnhancedScrollView alloc] initWithFrame:self.bounds];
@@ -417,6 +419,9 @@ - (void)scrollViewDidScroll:(UIScrollView *)scrollView
   if ((_lastScrollEventDispatchTime == 0) || (now - _lastScrollEventDispatchTime > _scrollEventThrottle)) {
     _lastScrollEventDispatchTime = now;
     if (_eventEmitter) {
+      if (_enableScrollViewEventRaceFix) {
+        [self _updateStateWithContentOffset];
+      }
       std::static_pointer_cast<ScrollViewEventEmitter const>(_eventEmitter)->onScroll([self _scrollViewMetrics]);
     }
     // Once Fabric implements proper NativeAnimationDriver, this should be removed.

React/Fabric/RCTSurfacePresenter.mm

@@ -261,6 +261,10 @@ - (RCTScheduler *)_createScheduler
     RCTExperimentSetSendScrollEventToPaper(NO);
   }
 
+  if (reactNativeConfig && reactNativeConfig->getBool("react_fabric:enable_state_scroll_data_race_ios")) {
+    RCTExperimentSetScrollViewEventRaceFix(YES);
+  }
+
   if (reactNativeConfig && reactNativeConfig->getBool("react_fabric:preemptive_view_allocation_disabled_ios")) {
     RCTExperimentSetPreemptiveViewAllocationDisabled(YES);
   }

ReactCommon/react/renderer/core/EventQueue.cpp

@@ -77,8 +77,8 @@ void EventQueue::enqueueStateUpdate(StateUpdate &&stateUpdate) const {
 }
 
 void EventQueue::onBeat(jsi::Runtime &runtime) const {
-  flushEvents(runtime);
   flushStateUpdates();
+  flushEvents(runtime);
 }
 
 void EventQueue::flushEvents(jsi::Runtime &runtime) const {