Experiment with using an object literal for Fiber creation

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.

Author: kassens

packages/react-reconciler/src/ReactFiber.js

@@ -38,6 +38,7 @@ import {
   enableDO_NOT_USE_disableStrictPassiveEffect,
   enableRenderableContext,
   disableLegacyMode,
+  enableObjectFiber,
   enableOwnerStacks,
 } from 'shared/ReactFeatureFlags';
 import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
@@ -232,7 +233,7 @@ function FiberNode(
 //    is faster.
 // 5) It should be easy to port this to a C struct and keep a C implementation
 //    compatible.
-function createFiber(
+function createFiberImplClass(
   tag: WorkTag,
   pendingProps: mixed,
   key: null | string,
@@ -242,6 +243,75 @@ function createFiber(
   return new FiberNode(tag, pendingProps, key, mode);
 }
 
+function createFiberImplObject(
+  tag: WorkTag,
+  pendingProps: mixed,
+  key: null | string,
+  mode: TypeOfMode,
+): Fiber {
+  const fiber: Fiber = {
+    // Instance
+    // tag, key - defined at the bottom as dynamic properties
+    elementType: null,
+    type: null,
+    stateNode: null,
+
+    // Fiber
+    return: null,
+    child: null,
+    sibling: null,
+    index: 0,
+
+    ref: null,
+    refCleanup: null,
+
+    // pendingProps - defined at the bottom as dynamic properties
+    memoizedProps: null,
+    updateQueue: null,
+    memoizedState: null,
+    dependencies: null,
+
+    // Effects
+    flags: NoFlags,
+    subtreeFlags: NoFlags,
+    deletions: null,
+
+    lanes: NoLanes,
+    childLanes: NoLanes,
+
+    alternate: null,
+
+    // dynamic properties at the end for more efficient hermes bytecode
+    tag,
+    key,
+    pendingProps,
+    mode,
+  };
+
+  if (enableProfilerTimer) {
+    fiber.actualDuration = 0;
+    fiber.actualStartTime = -1;
+    fiber.selfBaseDuration = 0;
+    fiber.treeBaseDuration = 0;
+  }
+
+  if (__DEV__) {
+    fiber._debugInfo = null;
+    fiber._debugOwner = null;
+    fiber._debugNeedsRemount = false;
+    fiber._debugHookTypes = null;
+
+    if (!hasBadMapPolyfill && typeof Object.preventExtensions === 'function') {
+      Object.preventExtensions(fiber);
+    }
+  }
+  return fiber;
+}
+
+const createFiber = enableObjectFiber
+  ? createFiberImplObject
+  : createFiberImplClass;
+
 function shouldConstruct(Component: Function) {
   const prototype = Component.prototype;
   return !!(prototype && prototype.isReactComponent);

packages/shared/ReactFeatureFlags.js

@@ -87,6 +87,11 @@ export const enableTaint = __EXPERIMENTAL__;
 
 export const enablePostpone = __EXPERIMENTAL__;
 
+/**
+ * Switches Fiber creation to a simple object instead of a constructor.
+ */
+export const enableObjectFiber = false;
+
 export const enableTransitionTracing = false;
 
 // No known bugs, but needs performance testing

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

@@ -22,5 +22,6 @@ export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__;
 export const disableDefaultPropsExceptForClasses = __VARIANT__;
 export const enableAddPropertiesFastPath = __VARIANT__;
 export const enableFastJSX = __VARIANT__;
+export const enableObjectFiber = __VARIANT__;
 export const enableShallowPropDiffing = __VARIANT__;
 export const passChildrenWhenCloningPersistedNodes = __VARIANT__;

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

@@ -24,6 +24,7 @@ export const {
   disableDefaultPropsExceptForClasses,
   enableAddPropertiesFastPath,
   enableFastJSX,
+  enableObjectFiber,
   enableShallowPropDiffing,
   passChildrenWhenCloningPersistedNodes,
 } = dynamicFlags;

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

@@ -55,6 +55,7 @@ export const enableLegacyCache = false;
 export const enableLegacyFBSupport = false;
 export const enableLegacyHidden = false;
 export const enableNoCloningMemoCache = false;
+export const enableObjectFiber = false;
 export const enableOwnerStacks = __EXPERIMENTAL__;
 export const enablePostpone = false;
 export const enableReactTestRendererWarning = false;

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

@@ -96,6 +96,7 @@ export const enableRenderableContext = true;
 export const enableReactTestRendererWarning = true;
 export const disableDefaultPropsExceptForClasses = true;
 
+export const enableObjectFiber = false;
 export const enableOwnerStacks = false;
 
 // 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;
 export const enableLegacyFBSupport = false;
 export const enableLegacyHidden = false;
 export const enableNoCloningMemoCache = false;
+export const enableObjectFiber = false;
 export const enableOwnerStacks = false;
 export const enablePostpone = false;
 export const enableProfilerCommitHooks = __PROFILE__;

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

@@ -90,6 +90,7 @@ export const enableAddPropertiesFastPath = false;
 
 export const renameElementSymbol = false;
 
+export const enableObjectFiber = false;
 export const enableOwnerStacks = false;
 export const enableShallowPropDiffing = false;
 

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

@@ -13,26 +13,27 @@
 // Use __VARIANT__ to simulate a GK. The tests will be run twice: once
 // with the __VARIANT__ set to `true`, and once set to `false`.
 
+export const alwaysThrottleRetries = true;
+export const disableDefaultPropsExceptForClasses = __VARIANT__;
+export const disableLegacyMode = __VARIANT__;
 export const disableSchedulerTimeoutInWorkLoop = __VARIANT__;
-export const enableLazyContextPropagation = __VARIANT__;
-export const forceConcurrentByDefaultForTesting = __VARIANT__;
-export const enableTransitionTracing = __VARIANT__;
+export const enableAddPropertiesFastPath = __VARIANT__;
 export const enableDeferRootSchedulingToMicrotask = __VARIANT__;
-export const alwaysThrottleRetries = true;
 export const enableDO_NOT_USE_disableStrictPassiveEffect = __VARIANT__;
-export const enableUseDeferredValueInitialArg = __VARIANT__;
-export const enableRenderableContext = __VARIANT__;
 export const enableFastJSX = __VARIANT__;
+export const enableLazyContextPropagation = __VARIANT__;
+export const enableNoCloningMemoCache = __VARIANT__;
+export const enableObjectFiber = __VARIANT__;
+export const enableRenderableContext = __VARIANT__;
 export const enableRetryLaneExpiration = __VARIANT__;
+export const enableTransitionTracing = __VARIANT__;
+export const enableUseDeferredValueInitialArg = __VARIANT__;
 export const favorSafetyOverHydrationPerf = __VARIANT__;
-export const disableDefaultPropsExceptForClasses = __VARIANT__;
-export const enableNoCloningMemoCache = __VARIANT__;
+export const forceConcurrentByDefaultForTesting = __VARIANT__;
+export const renameElementSymbol = __VARIANT__;
 export const retryLaneExpirationMs = 5000;
 export const syncLaneExpirationMs = 250;
 export const transitionLaneExpirationMs = 5000;
-export const enableAddPropertiesFastPath = __VARIANT__;
-export const disableLegacyMode = __VARIANT__;
-export const renameElementSymbol = __VARIANT__;
 
 // Enable this flag to help with concurrent mode debugging.
 // It logs information to the console about React scheduling, rendering, and commit phases.

packages/shared/forks/ReactFeatureFlags.www.js

@@ -15,27 +15,28 @@ import typeof * as DynamicFeatureFlags from './ReactFeatureFlags.www-dynamic';
 const dynamicFeatureFlags: DynamicFeatureFlags = require('ReactFeatureFlags');
 
 export const {
-  enableTrustedTypesIntegration,
+  alwaysThrottleRetries,
+  disableDefaultPropsExceptForClasses,
+  disableSchedulerTimeoutInWorkLoop,
+  enableAddPropertiesFastPath,
   enableDebugTracing,
+  enableDeferRootSchedulingToMicrotask,
+  enableDO_NOT_USE_disableStrictPassiveEffect,
+  enableFastJSX,
+  enableInfiniteRenderLoopDetection,
   enableLazyContextPropagation,
+  enableNoCloningMemoCache,
+  enableObjectFiber,
+  enableRenderableContext,
   enableRetryLaneExpiration,
   enableTransitionTracing,
-  enableDeferRootSchedulingToMicrotask,
-  alwaysThrottleRetries,
-  enableDO_NOT_USE_disableStrictPassiveEffect,
-  disableSchedulerTimeoutInWorkLoop,
+  enableTrustedTypesIntegration,
   enableUseDeferredValueInitialArg,
+  favorSafetyOverHydrationPerf,
+  renameElementSymbol,
   retryLaneExpirationMs,
   syncLaneExpirationMs,
   transitionLaneExpirationMs,
-  enableInfiniteRenderLoopDetection,
-  enableRenderableContext,
-  favorSafetyOverHydrationPerf,
-  disableDefaultPropsExceptForClasses,
-  enableNoCloningMemoCache,
-  enableAddPropertiesFastPath,
-  enableFastJSX,
-  renameElementSymbol,
 } = dynamicFeatureFlags;
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.