createFiberImplObject() — react Function Reference

Architecture documentation for the createFiberImplObject() function in ReactFiber.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ createFiberImplObject() — react Function Reference

Dependency Diagram

graph TD
  d712e9c1_31ad_ce20_8b6d_39d03b1b6df5["createFiberImplObject()"]
  8a03468f_f6e2_d5a3_fdef_e77ebca449c2["ReactFiber.js"]
  d712e9c1_31ad_ce20_8b6d_39d03b1b6df5 -->|defined in| 8a03468f_f6e2_d5a3_fdef_e77ebca449c2
  style d712e9c1_31ad_ce20_8b6d_39d03b1b6df5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-reconciler/src/ReactFiber.js lines 236–301

function createFiberImplObject(
  tag: WorkTag,
  pendingProps: mixed,
  key: ReactKey,
  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.1;
    fiber.selfBaseDuration = -0;
    fiber.treeBaseDuration = -0;
  }

  if (__DEV__) {
    // This isn't directly used but is handy for debugging internals:
    fiber._debugInfo = null;
    fiber._debugOwner = null;
    fiber._debugStack = null;
    fiber._debugTask = null;
    fiber._debugNeedsRemount = false;
    fiber._debugHookTypes = null;
    if (!hasBadMapPolyfill && typeof Object.preventExtensions === 'function') {
      Object.preventExtensions(fiber);
    }
  }
  return fiber;
}