@samitouri / QOS-React-1 / commits / fe9828954a

Experiment with using an object literal for Fiber creation (#28734)

Object literals should be faster at least on React Native with Hermes as the JS engine. It might also be interesting to confirm the old comments in this file from years ago are even still valid. Creating an object from a literal should be a simpler operation. It's a bit unfortunate that this introduces a bunch of copied code, but since we rearely update the fields on fibers, this seems like an okay tradeoff for a hot code path. An alternative would be some sort of macro system, but that doesn't seem worth the extra complexity.

Jan Kassens committed Jul 10, 2024 at 16:42 UTC fe9828954adcc51aa2bd21fe53d969a44dd3c9d2

10 files changed +108 -25

packages/react-reconciler/src/ReactFiber.js

+71 -1

@@ -38,6 +38,7 @@ import {

38 enableDO_NOT_USE_disableStrictPassiveEffect,

39 enableRenderableContext,

40 disableLegacyMode,

41 + enableObjectFiber,

42 enableOwnerStacks,

43 } from 'shared/ReactFeatureFlags';

44 import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';

@@ -232,7 +233,7 @@ function FiberNode(

233 // is faster.

234 // 5) It should be easy to port this to a C struct and keep a C implementation

235 // compatible.

235 -function createFiber(

236 +function createFiberImplClass(

237 tag: WorkTag,

238 pendingProps: mixed,

239 key: null | string,

@@ -242,6 +243,75 @@ function createFiber(

243 return new FiberNode(tag, pendingProps, key, mode);

244 }

245

246 +function createFiberImplObject(

247 + tag: WorkTag,

248 + pendingProps: mixed,

249 + key: null | string,

250 + mode: TypeOfMode,

251 +): Fiber {

252 + const fiber: Fiber = {

253 + // Instance

254 + // tag, key - defined at the bottom as dynamic properties

255 + elementType: null,

256 + type: null,

257 + stateNode: null,

258 +

259 + // Fiber

260 + return: null,

261 + child: null,

262 + sibling: null,

263 + index: 0,

264 +

265 + ref: null,

266 + refCleanup: null,

267 +

268 + // pendingProps - defined at the bottom as dynamic properties

269 + memoizedProps: null,

270 + updateQueue: null,

271 + memoizedState: null,

272 + dependencies: null,

273 +

274 + // Effects

275 + flags: NoFlags,

276 + subtreeFlags: NoFlags,

277 + deletions: null,

278 +

279 + lanes: NoLanes,

280 + childLanes: NoLanes,

281 +

282 + alternate: null,

283 +

284 + // dynamic properties at the end for more efficient hermes bytecode

285 + tag,

286 + key,

287 + pendingProps,

288 + mode,

289 + };

290 +

291 + if (enableProfilerTimer) {

292 + fiber.actualDuration = 0;

293 + fiber.actualStartTime = -1;

294 + fiber.selfBaseDuration = 0;

295 + fiber.treeBaseDuration = 0;

296 + }

297 +

298 + if (__DEV__) {

299 + fiber._debugInfo = null;

300 + fiber._debugOwner = null;

301 + fiber._debugNeedsRemount = false;

302 + fiber._debugHookTypes = null;

303 +

304 + if (!hasBadMapPolyfill && typeof Object.preventExtensions === 'function') {

305 + Object.preventExtensions(fiber);

306 + }

307 + }

308 + return fiber;

309 +}

310 +

311 +const createFiber = enableObjectFiber

312 + ? createFiberImplObject

313 + : createFiberImplClass;

314 +

315 function shouldConstruct(Component: Function) {

316 const prototype = Component.prototype;

317 return !!(prototype && prototype.isReactComponent);

packages/shared/ReactFeatureFlags.js

@@ -87,6 +87,11 @@ export const enableTaint = __EXPERIMENTAL__;

88 export const enablePostpone = __EXPERIMENTAL__;

90 +/**

91 + * Switches Fiber creation to a simple object instead of a constructor.

92 + */

93 +export const enableObjectFiber = false;

94 +

95 export const enableTransitionTracing = false;

97 // No known bugs, but needs performance testing

packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js

@@ -22,5 +22,6 @@ export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__;

22 export const disableDefaultPropsExceptForClasses = __VARIANT__;

23 export const enableAddPropertiesFastPath = __VARIANT__;

24 export const enableFastJSX = __VARIANT__;

25 +export const enableObjectFiber = __VARIANT__;

26 export const enableShallowPropDiffing = __VARIANT__;

27 export const passChildrenWhenCloningPersistedNodes = __VARIANT__;

packages/shared/forks/ReactFeatureFlags.native-fb.js

@@ -24,6 +24,7 @@ export const {

24 disableDefaultPropsExceptForClasses,

25 enableAddPropertiesFastPath,

26 enableFastJSX,

27 + enableObjectFiber,

28 enableShallowPropDiffing,

29 passChildrenWhenCloningPersistedNodes,

30 } = dynamicFlags;

packages/shared/forks/ReactFeatureFlags.native-oss.js

@@ -55,6 +55,7 @@ export const enableLegacyCache = false;

55 export const enableLegacyFBSupport = false;

56 export const enableLegacyHidden = false;

57 export const enableNoCloningMemoCache = false;

58 +export const enableObjectFiber = false;

59 export const enableOwnerStacks = __EXPERIMENTAL__;

60 export const enablePostpone = false;

61 export const enableReactTestRendererWarning = false;

packages/shared/forks/ReactFeatureFlags.test-renderer.js

@@ -96,6 +96,7 @@ export const enableRenderableContext = true;

96 export const enableReactTestRendererWarning = true;

97 export const disableDefaultPropsExceptForClasses = true;

99 +export const enableObjectFiber = false;

100 export const enableOwnerStacks = false;

101

102 // Flow magic to verify the exports of this file match the original version.

packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js

@@ -47,6 +47,7 @@ export const enableLegacyCache = false;

47 export const enableLegacyFBSupport = false;

48 export const enableLegacyHidden = false;

49 export const enableNoCloningMemoCache = false;

50 +export const enableObjectFiber = false;

51 export const enableOwnerStacks = false;

52 export const enablePostpone = false;

53 export const enableProfilerCommitHooks = __PROFILE__;

packages/shared/forks/ReactFeatureFlags.test-renderer.www.js

@@ -90,6 +90,7 @@ export const enableAddPropertiesFastPath = false;

91 export const renameElementSymbol = false;

93 +export const enableObjectFiber = false;

94 export const enableOwnerStacks = false;

95 export const enableShallowPropDiffing = false;

packages/shared/forks/ReactFeatureFlags.www-dynamic.js

+12 -11

@@ -13,26 +13,27 @@

13 // Use __VARIANT__ to simulate a GK. The tests will be run twice: once

14 // with the __VARIANT__ set to `true`, and once set to `false`.

16 +export const alwaysThrottleRetries = true;

17 +export const disableDefaultPropsExceptForClasses = __VARIANT__;

18 +export const disableLegacyMode = __VARIANT__;

19 export const disableSchedulerTimeoutInWorkLoop = __VARIANT__;

17 -export const enableLazyContextPropagation = __VARIANT__;

18 -export const forceConcurrentByDefaultForTesting = __VARIANT__;

19 -export const enableTransitionTracing = __VARIANT__;

20 +export const enableAddPropertiesFastPath = __VARIANT__;

21 export const enableDeferRootSchedulingToMicrotask = __VARIANT__;

21 -export const alwaysThrottleRetries = true;

22 export const enableDO_NOT_USE_disableStrictPassiveEffect = __VARIANT__;

23 -export const enableUseDeferredValueInitialArg = __VARIANT__;

24 -export const enableRenderableContext = __VARIANT__;

23 export const enableFastJSX = __VARIANT__;

24 +export const enableLazyContextPropagation = __VARIANT__;

25 +export const enableNoCloningMemoCache = __VARIANT__;

26 +export const enableObjectFiber = __VARIANT__;

27 +export const enableRenderableContext = __VARIANT__;

28 export const enableRetryLaneExpiration = __VARIANT__;

29 +export const enableTransitionTracing = __VARIANT__;

30 +export const enableUseDeferredValueInitialArg = __VARIANT__;

31 export const favorSafetyOverHydrationPerf = __VARIANT__;

28 -export const disableDefaultPropsExceptForClasses = __VARIANT__;

29 -export const enableNoCloningMemoCache = __VARIANT__;

32 +export const forceConcurrentByDefaultForTesting = __VARIANT__;

33 +export const renameElementSymbol = __VARIANT__;

34 export const retryLaneExpirationMs = 5000;

35 export const syncLaneExpirationMs = 250;

36 export const transitionLaneExpirationMs = 5000;

33 -export const enableAddPropertiesFastPath = __VARIANT__;

34 -export const disableLegacyMode = __VARIANT__;

35 -export const renameElementSymbol = __VARIANT__;

38 // Enable this flag to help with concurrent mode debugging.

39 // It logs information to the console about React scheduling, rendering, and commit phases.

packages/shared/forks/ReactFeatureFlags.www.js

+14 -13

@@ -15,27 +15,28 @@ import typeof * as DynamicFeatureFlags from './ReactFeatureFlags.www-dynamic';

15 const dynamicFeatureFlags: DynamicFeatureFlags = require('ReactFeatureFlags');

17 export const {

18 - enableTrustedTypesIntegration,

18 + alwaysThrottleRetries,

19 + disableDefaultPropsExceptForClasses,

20 + disableSchedulerTimeoutInWorkLoop,

21 + enableAddPropertiesFastPath,

22 enableDebugTracing,

23 + enableDeferRootSchedulingToMicrotask,

24 + enableDO_NOT_USE_disableStrictPassiveEffect,

25 + enableFastJSX,

26 + enableInfiniteRenderLoopDetection,

27 enableLazyContextPropagation,

28 + enableNoCloningMemoCache,

29 + enableObjectFiber,

30 + enableRenderableContext,

31 enableRetryLaneExpiration,

32 enableTransitionTracing,

23 - enableDeferRootSchedulingToMicrotask,

24 - alwaysThrottleRetries,

25 - enableDO_NOT_USE_disableStrictPassiveEffect,

26 - disableSchedulerTimeoutInWorkLoop,

33 + enableTrustedTypesIntegration,

34 enableUseDeferredValueInitialArg,

35 + favorSafetyOverHydrationPerf,

36 + renameElementSymbol,

37 retryLaneExpirationMs,

38 syncLaneExpirationMs,

39 transitionLaneExpirationMs,

31 - enableInfiniteRenderLoopDetection,

32 - enableRenderableContext,

33 - favorSafetyOverHydrationPerf,

34 - disableDefaultPropsExceptForClasses,

35 - enableNoCloningMemoCache,

36 - enableAddPropertiesFastPath,

37 - enableFastJSX,

38 - renameElementSymbol,

40 } = dynamicFeatureFlags;

42 // On WWW, __EXPERIMENTAL__ is used for a new modern build.