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

@@ -28,16 +28,17 @@ import {
   isHostSingletonType,
 } from './ReactFiberConfig';
 import {
-  enableProfilerTimer,
-  enableScopeAPI,
-  enableLegacyHidden,
-  forceConcurrentByDefaultForTesting,
   allowConcurrentByDefault,
-  enableTransitionTracing,
+  disableLegacyMode,
   enableDebugTracing,
   enableDO_NOT_USE_disableStrictPassiveEffect,
+  enableLegacyHidden,
+  enableObjectFiber,
+  enableProfilerTimer,
   enableRenderableContext,
-  disableLegacyMode,
+  enableScopeAPI,
+  enableTransitionTracing,
+  forceConcurrentByDefaultForTesting,
 } from 'shared/ReactFeatureFlags';
 import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
 import {ConcurrentRoot} from './ReactRootTags';
@@ -222,7 +223,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,
@@ -232,6 +233,217 @@ function createFiber(
   return new FiberNode(tag, pendingProps, key, mode);
 }
 
+function createFiberImplObjectDev(
+  tag: WorkTag,
+  pendingProps: mixed,
+  key: null | string,
+  mode: TypeOfMode,
+): Fiber {
+  const 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,
+
+    // __DEV__ only
+    _debugInfo: null,
+    _debugOwner: null,
+    _debugNeedsRemount: false,
+    _debugHookTypes: null,
+  };
+  if (!hasBadMapPolyfill && typeof Object.preventExtensions === 'function') {
+    Object.preventExtensions(fiber);
+  }
+  return fiber;
+}
+function createFiberImplObjectDevProfile(
+  tag: WorkTag,
+  pendingProps: mixed,
+  key: null | string,
+  mode: TypeOfMode,
+): Fiber {
+  const 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,
+
+    // enableProfilerTimer only
+    actualDuration: 0,
+    actualStartTime: -1,
+    selfBaseDuration: 0,
+    treeBaseDuration: 0,
+
+    // __DEV__ only
+    _debugInfo: null,
+    _debugOwner: null,
+    _debugNeedsRemount: false,
+    _debugHookTypes: null,
+  };
+  if (!hasBadMapPolyfill && typeof Object.preventExtensions === 'function') {
+    Object.preventExtensions(fiber);
+  }
+  return fiber;
+}
+function createFiberImplObjectProd(
+  tag: WorkTag,
+  pendingProps: mixed,
+  key: null | string,
+  mode: TypeOfMode,
+): Fiber {
+  return {
+    // 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,
+  };
+}
+function createFiberImplObjectProdProfile(
+  tag: WorkTag,
+  pendingProps: mixed,
+  key: null | string,
+  mode: TypeOfMode,
+): Fiber {
+  return {
+    // 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,
+
+    // enableProfilerTimer only
+    actualDuration: 0,
+    actualStartTime: -1,
+    selfBaseDuration: 0,
+    treeBaseDuration: 0,
+  };
+}
+
+const createFiber = !enableObjectFiber
+  ? createFiberImplClass
+  : __DEV__
+  ? enableProfilerTimer
+    ? createFiberImplObjectDevProfile
+    : createFiberImplObjectDev
+  : enableProfilerTimer
+  ? createFiberImplObjectProdProfile
+  : createFiberImplObjectProd;
+
 function shouldConstruct(Component: Function) {
   const prototype = Component.prototype;
   return !!(prototype && prototype.isReactComponent);

packages/shared/ReactFeatureFlags.js

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

@@ -27,3 +27,4 @@ export const enableRenderableContext = __VARIANT__;
 export const enableUnifiedSyncLane = __VARIANT__;
 export const passChildrenWhenCloningPersistedNodes = __VARIANT__;
 export const useModernStrictMode = __VARIANT__;
+export const enableObjectFiber = __VARIANT__;

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

@@ -25,6 +25,7 @@ export const {
   enableComponentStackLocations,
   enableDeferRootSchedulingToMicrotask,
   enableInfiniteRenderLoopDetection,
+  enableObjectFiber,
   enableRenderableContext,
   enableUnifiedSyncLane,
   passChildrenWhenCloningPersistedNodes,

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

@@ -72,6 +72,7 @@ export const enableSchedulingProfiler = __PROFILE__;
 export const enableLegacyCache = false;
 export const enableFetchInstrumentation = false;
 export const enablePostpone = false;
+export const enableObjectFiber = false;
 export const disableCommentsAsDOMContainers = true;
 export const disableInputAttributeSyncing = false;
 export const disableIEWorkarounds = true;

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

@@ -90,6 +90,7 @@ export const disableLegacyContext = true;
 export const disableDOMTestUtils = true;
 export const enableRenderableContext = true;
 export const enableReactTestRendererWarning = true;
+export const enableObjectFiber = false;
 
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);

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

@@ -84,6 +84,7 @@ export const disableStringRefs = false;
 export const enableReactTestRendererWarning = false;
 export const disableLegacyMode = false;
 export const disableDOMTestUtils = false;
+export const enableObjectFiber = false;
 
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);

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

@@ -84,6 +84,7 @@ export const disableStringRefs = false;
 export const enableReactTestRendererWarning = false;
 export const disableLegacyMode = false;
 export const disableDOMTestUtils = false;
+export const enableObjectFiber = false;
 
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);

packages/shared/forks/ReactFeatureFlags.www.js

@@ -114,6 +114,7 @@ export const disableStringRefs = false;
 export const disableLegacyMode = __EXPERIMENTAL__;
 
 export const disableDOMTestUtils = false;
+export const enableObjectFiber = false;
 
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);