Use fastAddProperties in diffing (#32243)
## Summary `fastAddProperties` has shown some perf benefits when used for creating props payload for new components. In this PR we'll try to use it for diffing props for existing components. It would be good enough if it simply doesn't regress perf. We'll be able to delete the old `addProperties`, and make `fastAddProperties` the default behaviour. ## How did you test this change? ``` yarn lint yarn flow native yarn test packages/react-native-renderer -r=xplat --variant=false yarn test packages/react-native-renderer -r=xplat --variant=true ```
Dmytro Rykun committed
Jan 30, 2025 at 11:16 UTC
bb9a24d9fc5faa57a85750cd3bb94546baa405ac
10 files changed
+19
-2
packages/react-native-renderer/src/ReactNativeAttributePayloadFabric.js
+9
-2
@@ -14,7 +14,10 @@ import {
14
} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
15
import isArray from 'shared/isArray';
16
17
-import {enableShallowPropDiffing} from 'shared/ReactFeatureFlags';
17
+import {
18
+ enableShallowPropDiffing,
19
+ enableFastAddPropertiesInDiffing,
20
+} from 'shared/ReactFeatureFlags';
21
22
import type {AttributeConfiguration} from './ReactNativeTypes';
23
@@ -218,7 +221,11 @@ function addNestedProperty(
221
222
if (!isArray(nextProp)) {
223
// Add each property of the leaf.
221
- return addProperties(updatePayload, nextProp, validAttributes);
224
+ if (enableFastAddPropertiesInDiffing) {
225
+ return fastAddProperties(updatePayload, nextProp, validAttributes);
226
+ } else {
227
+ return addProperties(updatePayload, nextProp, validAttributes);
228
+ }
229
}
230
231
for (let i = 0; i < nextProp.length; i++) {
packages/shared/ReactFeatureFlags.js
+2
@@ -157,6 +157,8 @@ export const enableInfiniteRenderLoopDetection = false;
157
*/
158
export const enableUseResourceEffectHook = false;
159
160
+export const enableFastAddPropertiesInDiffing = true;
161
+
162
// -----------------------------------------------------------------------------
163
// Ready for next major.
164
//
packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js
+1
@@ -28,3 +28,4 @@ export const enableSiblingPrerendering = __VARIANT__;
28
export const enableUseResourceEffectHook = __VARIANT__;
29
export const enableOwnerStacks = __VARIANT__;
30
export const enableRemoveConsolePatches = __VARIANT__;
31
+export const enableFastAddPropertiesInDiffing = __VARIANT__;
packages/shared/forks/ReactFeatureFlags.native-fb.js
+1
@@ -30,6 +30,7 @@ export const {
30
enableSiblingPrerendering,
31
enableOwnerStacks,
32
enableRemoveConsolePatches,
33
+ enableFastAddPropertiesInDiffing,
34
} = dynamicFlags;
35
36
// The rest of the flags are static for better dead code elimination.
packages/shared/forks/ReactFeatureFlags.native-oss.js
+1
@@ -72,6 +72,7 @@ export const enableYieldingBeforePassive = false;
72
73
export const enableThrottledScheduling = false;
74
export const enableViewTransition = false;
75
+export const enableFastAddPropertiesInDiffing = false;
76
77
// Profiling Only
78
export const enableProfilerTimer = __PROFILE__;
packages/shared/forks/ReactFeatureFlags.test-renderer.js
+1
@@ -71,6 +71,7 @@ export const enableYieldingBeforePassive = true;
71
72
export const enableThrottledScheduling = false;
73
export const enableViewTransition = false;
74
+export const enableFastAddPropertiesInDiffing = true;
75
76
// TODO: This must be in sync with the main ReactFeatureFlags file because
77
// the Test Renderer's value must be the same as the one used by the
packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js
+1
@@ -69,6 +69,7 @@ export const enableYieldingBeforePassive = false;
69
export const enableThrottledScheduling = false;
70
export const enableViewTransition = false;
71
export const enableRemoveConsolePatches = false;
72
+export const enableFastAddPropertiesInDiffing = false;
73
74
// Flow magic to verify the exports of this file match the original version.
75
((((null: any): ExportsType): FeatureFlagsType): ExportsType);
packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+1
@@ -84,6 +84,7 @@ export const enableYieldingBeforePassive = false;
84
export const enableThrottledScheduling = false;
85
export const enableViewTransition = false;
86
export const enableRemoveConsolePatches = false;
87
+export const enableFastAddPropertiesInDiffing = false;
88
89
// Flow magic to verify the exports of this file match the original version.
90
((((null: any): ExportsType): FeatureFlagsType): ExportsType);
packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+1
@@ -38,6 +38,7 @@ export const enableSiblingPrerendering = __VARIANT__;
38
39
export const enableUseResourceEffectHook = __VARIANT__;
40
export const enableRemoveConsolePatches = __VARIANT__;
41
+export const enableFastAddPropertiesInDiffing = __VARIANT__;
42
43
// TODO: These flags are hard-coded to the default values used in open source.
44
// Update the tests so that they pass in either mode, then set these
packages/shared/forks/ReactFeatureFlags.www.js
+1
@@ -37,6 +37,7 @@ export const {
37
transitionLaneExpirationMs,
38
enableOwnerStacks,
39
enableRemoveConsolePatches,
40
+ enableFastAddPropertiesInDiffing,
41
} = dynamicFeatureFlags;
42
43
// On WWW, __EXPERIMENTAL__ is used for a new modern build.