Fabric: Using state auto-repeating in RCTSafeAreaViewComponentView

Summary:
This change introducing using `updateStateWithAutorepeat` for state updates in RCTSafeAreaViewComponentView. This way we can reduce the number of active commits and reduce jumps & relayout passes.
The approach with a callback is better than using `_lastPaddingStateWasUpdatedWith` because:
* When we compare the values, we can compare them with actual previous padding numbers stored in Shadow Tree.
* The value stored in a UIView instance can go away because of a view being remounted because of flattening.

Changelog: [Internal] Fabric-specific internal change.

Reviewed By: JoshuaGross

Differential Revision: D24719345

fbshipit-source-id: 9bf1ae284875b4c99cf23be2fcc9a829eb8a895e

React/Fabric/Mounting/ComponentViews/SafeAreaView/RCTSafeAreaViewComponentView.mm

@@ -18,7 +18,6 @@
 
 @implementation RCTSafeAreaViewComponentView {
   SafeAreaViewShadowNode::ConcreteState::Shared _state;
-  EdgeInsets _lastPaddingStateWasUpdatedWith;
 }
 
 - (instancetype)initWithFrame:(CGRect)frame
@@ -62,36 +61,47 @@ - (void)_updateStateIfNecessary
 
   auto newPadding = RCTEdgeInsetsFromUIEdgeInsets(insets);
   auto threshold = 1.0 / RCTScreenScale() + 0.01; // Size of a pixel plus some small threshold.
-  auto deltaPadding = newPadding - _lastPaddingStateWasUpdatedWith;
 
-  if (std::abs(deltaPadding.left) < threshold && std::abs(deltaPadding.top) < threshold &&
-      std::abs(deltaPadding.right) < threshold && std::abs(deltaPadding.bottom) < threshold) {
-    return;
-  }
-
-  _lastPaddingStateWasUpdatedWith = newPadding;
-  _state->updateState(SafeAreaViewState{newPadding});
+  _state->updateStateWithAutorepeat(
+      [=](SafeAreaViewShadowNode::ConcreteState::Data const &oldData)
+          -> SafeAreaViewShadowNode::ConcreteState::SharedData {
+        auto oldPadding = oldData.padding;
+        auto deltaPadding = newPadding - oldPadding;
+
+        if (std::abs(deltaPadding.left) < threshold && std::abs(deltaPadding.top) < threshold &&
+            std::abs(deltaPadding.right) < threshold && std::abs(deltaPadding.bottom) < threshold) {
+          return nullptr;
+        }
+
+        auto newData = oldData;
+        newData.padding = newPadding;
+        return std::make_shared<SafeAreaViewShadowNode::ConcreteState::Data>(newData);
+      });
 }
 
 #pragma mark - RCTComponentViewProtocol
 
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<SafeAreaViewComponentDescriptor>();
+}
+
 - (void)updateState:(facebook::react::State::Shared const &)state
            oldState:(facebook::react::State::Shared const &)oldState
 {
   _state = std::static_pointer_cast<SafeAreaViewShadowNode::ConcreteState const>(state);
+}
+
+- (void)finalizeUpdates:(RNComponentViewUpdateMask)updateMask
+{
+  [super finalizeUpdates:updateMask];
   [self _updateStateIfNecessary];
 }
 
 - (void)prepareForRecycle
 {
   [super prepareForRecycle];
   _state.reset();
-  _lastPaddingStateWasUpdatedWith = {};
-}
-
-+ (ComponentDescriptorProvider)componentDescriptorProvider
-{
-  return concreteComponentDescriptorProvider<SafeAreaViewComponentDescriptor>();
 }
 
 @end

ReactCommon/react/renderer/components/safeareaview/SafeAreaViewState.h

@@ -17,9 +17,7 @@ namespace react {
  */
 class SafeAreaViewState final {
  public:
-  using Shared = std::shared_ptr<SafeAreaViewState const>;
-
-  EdgeInsets const padding{};
+  EdgeInsets padding{};
 };
 
 } // namespace react