Limit Yoga layout to relevant root on resize (#10580)

* Limit Yoga layout to relevant root on resize

Recalculation of Yoga layout due to root view size change does not
require that we re-run layout on all roots. It also does not require
that we invoke UpdateLayout on any new nodes (as a resize operation is
independent of a batch of UIManager operations).

This change limits the scope of Yoga calculation and application of Yoga
results to XAML views to only the root view that changed size. This
optimization primarily impacts apps with multiple windows, but can also
benefit any React Native Windows app with multiple roots.

* Change files

Author: rozele

change/react-native-windows-f7c98885-c2ec-4944-8d7b-03f0fcc696cc.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Limit Yoga layout to relevant root on resize",
+  "packageName": "react-native-windows",
+  "email": "erozell@outlook.com",
+  "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/Modules/NativeUIManager.cpp

@@ -217,23 +217,26 @@ void NativeUIManager::AddRootView(ShadowNode &shadowNode, facebook::react::IReac
   SystraceSection s("NativeUIManager::AddRootView");
   auto xamlRootView = static_cast<IXamlRootView *>(pReactRootView);
   XamlView view = xamlRootView->GetXamlView();
+  const auto rootTag = shadowNode.m_tag;
   m_tagsToXamlReactControl.emplace(
-      shadowNode.m_tag,
+      rootTag,
       winrt::weak_ref<winrt::Microsoft::ReactNative::ReactRootView>(
           view.as<winrt::Microsoft::ReactNative::ReactRootView>()));
 
   // Push the appropriate FlowDirection into the root view.
   view.as<xaml::FrameworkElement>().FlowDirection(
       I18nManager::IsRTL(m_context.Properties()) ? xaml::FlowDirection::RightToLeft : xaml::FlowDirection::LeftToRight);
 
-  m_tagsToYogaNodes.emplace(shadowNode.m_tag, make_yoga_node(m_yogaConfig));
+  m_tagsToYogaNodes.emplace(rootTag, make_yoga_node(m_yogaConfig));
 
   auto element = view.as<xaml::FrameworkElement>();
-  Microsoft::ReactNative::SetTag(element, shadowNode.m_tag);
+  Microsoft::ReactNative::SetTag(element, rootTag);
 
   // Add listener to size change so we can redo the layout when that happens
-  m_sizeChangedVector.push_back(
-      view.as<xaml::FrameworkElement>().SizeChanged(winrt::auto_revoke, [this](auto &&, auto &&) { DoLayout(); }));
+  m_sizeChangedVector.push_back(view.as<xaml::FrameworkElement>().SizeChanged(
+      winrt::auto_revoke, [this, rootTag](auto &&, xaml::SizeChangedEventArgs const &args) {
+        ApplyLayout(rootTag, args.NewSize().Width, args.NewSize().Height);
+      }));
 }
 
 void NativeUIManager::removeRootView(Microsoft::ReactNative::ShadowNode &shadow) {