avoid merging unrelated props into ShadowNodeFamily::nativeProps (#43305)

Summary:
Pull Request resolved: #43305

changelog: [internal]

Originally when I built setNativeProps, I assumed a node is either controlled by handled directly or it is controlled by React. But we can't make sure that's the case, users can do both and control one prop with setNativeProps and the others with React. Additionally, Suspense uses display: none to hide a subtree.

Therefore, React controlled props must not be copied into `ShadowNodeFamily::nativeProps_DEPRECATED`

Reviewed By: javache

Differential Revision: D54453820

fbshipit-source-id: 5b4038f0dd366621d26a92f668d33f27ce60f4b4

Author: sammy-SC

packages/react-native/ReactCommon/react/renderer/components/legacyviewmanagerinterop/LegacyViewManagerInteropViewProps.cpp

@@ -15,8 +15,9 @@ LegacyViewManagerInteropViewProps::LegacyViewManagerInteropViewProps(
     const LegacyViewManagerInteropViewProps& sourceProps,
     const RawProps& rawProps)
     : ViewProps(context, sourceProps, rawProps),
-      otherProps(
-          mergeDynamicProps(sourceProps.otherProps, (folly::dynamic)rawProps)) {
-}
+      otherProps(mergeDynamicProps(
+          sourceProps.otherProps,
+          (folly::dynamic)rawProps,
+          NullValueStrategy::Override)) {}
 
 } // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/core/DynamicPropsUtilities.cpp

@@ -11,7 +11,8 @@ namespace facebook::react {
 
 folly::dynamic mergeDynamicProps(
     const folly::dynamic& source,
-    const folly::dynamic& patch) {
+    const folly::dynamic& patch,
+    NullValueStrategy nullValueStrategy) {
   auto result = source;
 
   if (!result.isObject()) {
@@ -25,6 +26,10 @@ folly::dynamic mergeDynamicProps(
   // Note, here we have to preserve sub-prop objects with `null` value as
   // an indication for the legacy mounting layer that it needs to clean them up.
   for (const auto& pair : patch.items()) {
+    if (nullValueStrategy == NullValueStrategy::Ignore &&
+        source.find(pair.first) == source.items().end()) {
+      continue;
+    }
     result[pair.first] = pair.second;
   }
 

packages/react-native/ReactCommon/react/renderer/core/DynamicPropsUtilities.h

@@ -12,13 +12,40 @@
 
 namespace facebook::react {
 
+/*
+ * Enum defining how missing value in `source` is handled if it is present in
+ * `patch`.
+ */
+enum class NullValueStrategy {
+  /*
+   * Key in source will be overriden by the matching key in patch.
+   *
+   * Example:
+   * source:   {"key": "value"}
+   * patch:    {"key": "new value"}
+   * returned: {"key": "new value"}
+   */
+  Override,
+
+  /*
+   * In case key is missing in source, value from patch will be ignored.
+   *
+   * Example:
+   * source:   {"key 1": "value 1"}
+   * patch:    {"key": "new value 1", "key 2": "new value 2"}
+   * returned: {"key": "new value 1"}
+   */
+  Ignore
+};
+
 /*
  * Accepts two `folly::dynamic` objects as arguments. Both arguments need to
  * represent a dictionary. It updates `source` with key/value pairs from
- * `patch`, overriding existing keys.
+ * `patch`.
  */
 folly::dynamic mergeDynamicProps(
     const folly::dynamic& source,
-    const folly::dynamic& patch);
+    const folly::dynamic& patch,
+    NullValueStrategy nullValueStrategy);
 
 } // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/core/ShadowNode.cpp

@@ -42,7 +42,9 @@ Props::Shared ShadowNode::propsForClonedShadowNode(
   if (!hasBeenMounted && sourceNodeHasRawProps && props) {
     auto& castedProps = const_cast<Props&>(*props);
     castedProps.rawProps = mergeDynamicProps(
-        sourceShadowNode.getProps()->rawProps, props->rawProps);
+        sourceShadowNode.getProps()->rawProps,
+        props->rawProps,
+        NullValueStrategy::Override);
     return props;
   }
 #endif

packages/react-native/ReactCommon/react/renderer/core/tests/DynamicPropsUtilitiesTest.cpp

@@ -24,7 +24,7 @@ TEST(DynamicPropsUtilitiesTest, handleNestedObjects) {
   map2["style"] = dynamic::object("backgroundColor", "blue")("color", "black");
   map2["height"] = 100;
 
-  auto result = mergeDynamicProps(map1, map2);
+  auto result = mergeDynamicProps(map1, map2, NullValueStrategy::Override);
 
   EXPECT_TRUE(result["style"].isObject());
   EXPECT_TRUE(result["style"]["backgroundColor"].isString());
@@ -42,25 +42,39 @@ TEST(DynamicPropsUtilitiesTest, handleEmptyObject) {
   dynamic map2 = dynamic::object;
   map2["height"] = 100;
 
-  auto result = mergeDynamicProps(map1, map2);
+  auto result = mergeDynamicProps(map1, map2, NullValueStrategy::Override);
 
   EXPECT_TRUE(result["height"].isInt());
   EXPECT_EQ(result["height"], 100);
 
-  result = mergeDynamicProps(map1, map2);
+  result = mergeDynamicProps(map1, map2, NullValueStrategy::Override);
 
   EXPECT_TRUE(result["height"].isInt());
   EXPECT_EQ(result["height"], 100);
 }
 
-TEST(DynamicPropsUtilitiesTest, handleNull) {
+TEST(DynamicPropsUtilitiesTest, handleNullValue) {
   dynamic map1 = dynamic::object;
   map1["height"] = 100;
 
   dynamic map2 = dynamic::object;
   map2["height"] = nullptr;
 
-  auto result = mergeDynamicProps(map1, map2);
+  auto result = mergeDynamicProps(map1, map2, NullValueStrategy::Override);
 
   EXPECT_TRUE(result["height"].isNull());
 }
+
+TEST(DynamicPropsUtilitiesTest, testNullValueStrategyIgnore) {
+  dynamic map1 = dynamic::object;
+  map1["height"] = 100;
+
+  dynamic map2 = dynamic::object;
+  map2["width"] = 200;
+  map2["height"] = 101;
+
+  auto result = mergeDynamicProps(map1, map2, NullValueStrategy::Ignore);
+
+  EXPECT_EQ(result["height"], 101);
+  EXPECT_TRUE(result["width"].isNull());
+}

packages/react-native/ReactCommon/react/renderer/uimanager/UIManager.cpp

@@ -129,7 +129,9 @@ std::shared_ptr<ShadowNode> UIManager::cloneNode(
       // was previously in `nativeProps_DEPRECATED`.
       family.nativeProps_DEPRECATED =
           std::make_unique<folly::dynamic>(mergeDynamicProps(
-              *family.nativeProps_DEPRECATED, (folly::dynamic)rawProps));
+              *family.nativeProps_DEPRECATED,
+              (folly::dynamic)rawProps,
+              NullValueStrategy::Ignore));
 
       props = componentDescriptor.cloneProps(
           propsParserContext,
@@ -513,7 +515,9 @@ void UIManager::setNativeProps_DEPRECATED(
     // previously in `nativeProps_DEPRECATED`.
     family.nativeProps_DEPRECATED =
         std::make_unique<folly::dynamic>(mergeDynamicProps(
-            *family.nativeProps_DEPRECATED, (folly::dynamic)rawProps));
+            *family.nativeProps_DEPRECATED,
+            (folly::dynamic)rawProps,
+            NullValueStrategy::Override));
   } else {
     family.nativeProps_DEPRECATED =
         std::make_unique<folly::dynamic>((folly::dynamic)rawProps);