Add `cloneMultiple` method to the `ShadowNode` class #50624

bartlomiejbloniarz · 2025-04-10T13:09:13Z

Summary:

This PR adds a new cloning method, allowing for updating multiple nodes in a single transaction. It works in two phases:

Find which nodes have to be cloned (i.e. nodes given on input and all their ancestors)
Clone nodes in the bottom up order - so that every node is cloned exactly once

So the idea is that when we want to update all the red nodes in this picture, we first find the nodes in the green area and the clone only them in the correct order (children are cloned before parents):

Adapting this method brought a huge performance gain to reanimated. I want to upstream it, so that:

we can optimize it further, because making it a part of the ShadowNode class gives us access to the parent field in ShadowNodeFamily so we can traverse the tree upwards, allowing for a optimal implementation of the first phase (in reanimated we repeatedly call getAncestors, which revisits some nodes multiple times)
the community can use it

A naive approach that calls cloneTree for every node is much slower, as it has to repeat many operations.

Changelog:

[GENERAL] [ADDED] - Added cloneMultiple to ShadowNode class.

Test Plan:

I tested it with the following reanimated implementation and everything works fine:

const auto callback =
      [&](const ShadowNode &shadowNode,
          const std::optional<ShadowNode::ListOfShared> &newChildren) {
        return shadowNode.clone(
            {mergeProps(shadowNode, propsMap, shadowNode.getFamily()),
             newChildren
                 ? std::make_shared<ShadowNode::ListOfShared>(*newChildren)
                 : ShadowNodeFragment::childrenPlaceholder(),
             shadowNode.getState()});
      };
  return std::static_pointer_cast<RootShadowNode>(
      oldRootNode.cloneMultiple(families, callback));

I would like to add tests for it, but I'm not sure what's the best approach for that in the repo.

tomekzaw · 2025-04-10T13:37:25Z

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

+        const ShadowNode& oldShadowNode,
+        const std::optional<ShadowNode::ListOfShared>& newChildren)>& callback)
+    const {
+  std::unordered_map<const ShadowNodeFamily*, int> childrenCount;


Suggested change

std::unordered_map<const ShadowNodeFamily*, int> childrenCount;

std::unordered_map<const std::ref<const ShadowNodeFamily>, unsigned int> childrenCounts;

tomekzaw · 2025-04-10T13:38:03Z

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

@@ -252,6 +266,15 @@ class ShadowNode : public Sealable,
      const ShadowNode& sourceShadowNode,
      const Props::Shared& props);

+  Unshared cloneMultipleRecursive(
+      const ShadowNode& shadowNode,
+      const std::unordered_set<const ShadowNodeFamily*>& families,


Let's pass ShadowNodeFamily as a std::ref instead of a pointer maybe?

Suggested change

const std::unordered_set<const ShadowNodeFamily*>& families,

const std::unordered_set<const ShadowNodeFamily &>& families,

tomekzaw · 2025-04-10T13:38:19Z

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

+      const std::unordered_set<const ShadowNodeFamily*>& families,
+      const std::function<Unshared(
+          const ShadowNode& oldShadowNode,
+          const std::optional<ShadowNode::ListOfShared>& newChildren)>&


Let's also explain why newChildren is optional.

tomekzaw · 2025-04-10T13:41:41Z

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

+   */
+  Unshared cloneMultiple(
+      const std::unordered_set<const ShadowNodeFamily*>& families,
+      const std::function<Unshared(


Let's also mention what happens if callback returns nullptr?

The implementation is not really well defined if you call this method on anything that's not the RootShadowNode. Should this live on the root instead?

tomekzaw · 2025-04-10T13:42:07Z

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

+  }
+
+  if (childrenCount.empty()) {
+    return ShadowNode::Unshared{nullptr};


Do we need to be that explicit about the return type?

Suggested change

return ShadowNode::Unshared{nullptr};

return nullptr;

javache

Since these methods don't actually need to live on ShadowNode, what about creating a ShadowNodeMutations helper class (and defining it as a friend class if necessary)

javache · 2025-04-11T08:45:43Z

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

+    const std::unordered_set<const ShadowNodeFamily*>& families,
+    const std::unordered_map<const ShadowNodeFamily*, int>& childrenCount,


Instead of using pointers to ShadowNodeFamily, let's try to use refs, eg using std::reference_wrapper

I tried that. The problem with it is that I use unordered containers, so that would require implementing hash methods for the family.

For now I changed the loop over ancestors, to lock the weak pointer, so that when we access any fields of a family, we are sure it's still around. After that we only compare these pointers as numbers - we never dereference them so it will be safe. This would only fail if someone passed familiesToUpdate to the function, without owning them. In reanimated we keep shared_ptrs of ShadowNodes related to these families to ensure that they are still available when we perform the algorithm.

What do you think?

We could change the api to instead work with shared_ptrs. The problem is that users of this api (so for example reanimated), don't have access to shared_ptrs of the ShadowNodeFamily class, as you only can get a reference from the ShadowNode.getFamily() method.

javache · 2025-04-11T08:46:34Z

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

+        const std::optional<ShadowNode::ListOfShared>& newChildren)>& callback)
+    const {
+  const auto family = &shadowNode.getFamily();
+  auto children = shadowNode.getChildren();


Avoid copying the list

Suggested change

auto children = shadowNode.getChildren();

const auto& children = shadowNode.getChildren();

I am copying that on purpose, as I want to modify it later on in the loop.

You could also model this as a std::optional and only do the copy when you first need to. That also avoids the need for shouldUpdateChildren.

javache · 2025-04-11T08:48:13Z

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

@@ -368,6 +368,80 @@ ShadowNode::Unshared ShadowNode::cloneTree(
  return std::const_pointer_cast<ShadowNode>(childNode);
 }

+ShadowNode::Unshared ShadowNode::cloneMultipleRecursive(
+    const ShadowNode& shadowNode,
+    const std::unordered_set<const ShadowNodeFamily*>& families,


Is this familiesToUpdate?

Will rename

javache · 2025-04-11T08:49:36Z

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

+    const std::unordered_set<const ShadowNodeFamily*>& families,
+    const std::function<Unshared(
+        const ShadowNode& oldShadowNode,
+        const std::optional<ShadowNode::ListOfShared>& newChildren)>& callback)


Pass in a ShadowNodeFragment instead of children explicitly

bartlomiejbloniarz · 2025-04-11T09:16:42Z

@javache Sure I can extract it to a separate file. Should I also move the cloneTree function? I wanted the cloneMultiple function to be a generalization of that.

bartlomiejbloniarz · 2025-05-12T13:39:35Z

@javache What is the state of this? Do you think this approach needs reworking?

javache

Overall, looks good. I'll import to get some internal feedback. Some more comments inline.

@zeyap Is this something we should use in the updateShadowTree method you added in 01eafef?

javache · 2025-05-23T10:15:46Z

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

@@ -368,6 +368,80 @@ ShadowNode::Unshared ShadowNode::cloneTree(
  return std::const_pointer_cast<ShadowNode>(childNode);
 }

+ShadowNode::Unshared ShadowNode::cloneMultipleRecursive(
+    const ShadowNode& shadowNode,


Could this just be a instance method? Alternatively make it static if it doesn't depend on instance state.

javache · 2025-05-23T10:17:03Z

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

+    const std::function<Unshared(
+        const ShadowNode& oldShadowNode,
+        const ShadowNodeFragment& fragment)>& callback) const {
+  const auto family = &shadowNode.getFamily();


Use const auto * to make it explicit this isn't a copy. Even better would be to just use the ref here, and only deref it when looking it up.

javache · 2025-05-23T10:18:59Z

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

+        const std::optional<ShadowNode::ListOfShared>& newChildren)>& callback)
+    const {
+  const auto family = &shadowNode.getFamily();
+  auto children = shadowNode.getChildren();


You could also model this as a std::optional and only do the copy when you first need to. That also avoids the need for shouldUpdateChildren.

javache · 2025-05-23T10:22:13Z

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

+   */
+  Unshared cloneMultiple(
+      const std::unordered_set<const ShadowNodeFamily*>& families,
+      const std::function<Unshared(


The implementation is not really well defined if you call this method on anything that's not the RootShadowNode. Should this live on the root instead?

javache · 2025-05-23T10:26:53Z

@javache Sure I can extract it to a separate file. Should I also move the cloneTree function? I wanted the cloneMultiple function to be a generalization of that.

Yeah, that seems reasonable. Let's keep it backwards compatible though and forward the API.

facebook-github-bot · 2025-05-23T10:27:20Z

@javache has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

react-native-bot · 2025-05-28T17:59:05Z

This pull request was successfully merged by @bartlomiejbloniarz in 1161fb4

^{When will my fix make it into a release? | How to file a pick request?}

facebook-github-bot · 2025-05-28T17:59:07Z

@javache merged this pull request in 1161fb4.

bartlomiejbloniarz added 5 commits April 10, 2025 10:12

Add cloneMultiple

06dfc41

fix const

c035d85

Fix nested case

3734f7b

Add description

d9fc6c6

Add missing consts

23b188e

facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. p: Software Mansion Partner: Software Mansion Partner labels Apr 10, 2025

bartlomiejbloniarz changed the title ~~Add cloneMultiple~~ Add cloneMultiple method to the ShadowNode class Apr 10, 2025

facebook-github-bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Apr 10, 2025

tomekzaw reviewed Apr 10, 2025

View reviewed changes

javache requested a review from zeyap April 11, 2025 08:41

javache reviewed Apr 11, 2025

View reviewed changes

bartlomiejbloniarz added 3 commits April 11, 2025 11:20

Rename families

68ad9c2

Use ShadowNodeFragment instead

47c2bf8

Fix ancestor parent

b8eb348

javache reviewed May 23, 2025

View reviewed changes

facebook-github-bot closed this in 1161fb4 May 28, 2025

react-native-bot added the Merged This PR has been merged. label May 28, 2025

	std::unordered_map<const ShadowNodeFamily*, int> childrenCount;
	std::unordered_map<const std::ref<const ShadowNodeFamily>, unsigned int> childrenCounts;

	const std::unordered_set<const ShadowNodeFamily*>& families,
	const std::unordered_set<const ShadowNodeFamily &>& families,

		const std::unordered_set<const ShadowNodeFamily*>& families,
		const std::unordered_map<const ShadowNodeFamily*, int>& childrenCount,

	auto children = shadowNode.getChildren();
	const auto& children = shadowNode.getChildren();

Add cloneMultiple method to the ShadowNode class #50624

Add cloneMultiple method to the ShadowNode class #50624

Uh oh!

Conversation

bartlomiejbloniarz commented Apr 10, 2025

Summary:

Changelog:

Test Plan:

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

javache left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bartlomiejbloniarz commented Apr 11, 2025

Uh oh!

bartlomiejbloniarz commented May 12, 2025

Uh oh!

javache left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

javache commented May 23, 2025

Uh oh!

facebook-github-bot commented May 23, 2025

Uh oh!

react-native-bot commented May 28, 2025

Uh oh!

facebook-github-bot commented May 28, 2025

Uh oh!

Uh oh!

Add `cloneMultiple` method to the `ShadowNode` class #50624

Add `cloneMultiple` method to the `ShadowNode` class #50624