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,72 @@ 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,
+    elementType: null,
+    type: null,
+    stateNode: null,
+
+    // Fiber
+    return: null,
+    child: null,
+    sibling: null,
+    index: 0,
+
+    ref: null,
+    refCleanup: null,
+
+    pendingProps,
+    memoizedProps: null,
+    updateQueue: null,
+    memoizedState: null,
+    dependencies: null,
+
+    mode,
+
+    // Effects
+    flags: NoFlags,
+    subtreeFlags: NoFlags,
+    deletions: null,
+
+    lanes: NoLanes,
+    childLanes: NoLanes,
+
+    alternate: null,
+  };
+
+  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

@@ -24,5 +24,6 @@ export const enableAddPropertiesFastPath = __VARIANT__;
 export const enableDeferRootSchedulingToMicrotask = __VARIANT__;
 export const enableFastJSX = __VARIANT__;
 export const enableInfiniteRenderLoopDetection = __VARIANT__;
+export const enableObjectFiber = __VARIANT__;
 export const enableShallowPropDiffing = __VARIANT__;
 export const passChildrenWhenCloningPersistedNodes = __VARIANT__;

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

@@ -26,6 +26,7 @@ export const {
   enableDeferRootSchedulingToMicrotask,
   enableFastJSX,
   enableInfiniteRenderLoopDetection,
+  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

@@ -97,6 +97,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

@@ -91,6 +91,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.js

@@ -122,6 +122,7 @@ export const disableStringRefs = false;
 export const disableLegacyMode: boolean =
   __EXPERIMENTAL__ || dynamicFeatureFlags.disableLegacyMode;
 
+export const enableObjectFiber = false;
 export const enableOwnerStacks = false;
 export const enableShallowPropDiffing = false;