FiberNode() — react Function Reference

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

Function javascript BabelCompiler Validation called by 1

Entity Profile

BabelCompiler→ Validation→ FiberNode() — react Function Reference

Dependency Diagram

graph TD
  6740ab8d_aa88_d90b_980a_685b4fdf549b["FiberNode()"]
  8a03468f_f6e2_d5a3_fdef_e77ebca449c2["ReactFiber.js"]
  6740ab8d_aa88_d90b_980a_685b4fdf549b -->|defined in| 8a03468f_f6e2_d5a3_fdef_e77ebca449c2
  a2c437e3_5aef_9a13_573e_999bc8d7e4f0["createFiberImplClass()"]
  a2c437e3_5aef_9a13_573e_999bc8d7e4f0 -->|calls| 6740ab8d_aa88_d90b_980a_685b4fdf549b
  style 6740ab8d_aa88_d90b_980a_685b4fdf549b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-reconciler/src/ReactFiber.js lines 138–211

function FiberNode(
  this: $FlowFixMe,
  tag: WorkTag,
  pendingProps: mixed,
  key: ReactKey,
  mode: TypeOfMode,
) {
  // Instance
  this.tag = tag;
  this.key = key;
  this.elementType = null;
  this.type = null;
  this.stateNode = null;

  // Fiber
  this.return = null;
  this.child = null;
  this.sibling = null;
  this.index = 0;

  this.ref = null;
  this.refCleanup = null;

  this.pendingProps = pendingProps;
  this.memoizedProps = null;
  this.updateQueue = null;
  this.memoizedState = null;
  this.dependencies = null;

  this.mode = mode;

  // Effects
  this.flags = NoFlags;
  this.subtreeFlags = NoFlags;
  this.deletions = null;

  this.lanes = NoLanes;
  this.childLanes = NoLanes;

  this.alternate = null;

  if (enableProfilerTimer) {
    // Note: The following is done to avoid a v8 performance cliff.
    //
    // Initializing the fields below to smis and later updating them with
    // double values will cause Fibers to end up having separate shapes.
    // This behavior/bug has something to do with Object.preventExtension().
    // Fortunately this only impacts DEV builds.
    // Unfortunately it makes React unusably slow for some applications.
    // To work around this, initialize the fields below with doubles.
    //
    // Learn more about this here:
    // https://github.com/facebook/react/issues/14365
    // https://bugs.chromium.org/p/v8/issues/detail?id=8538

    this.actualDuration = -0;
    this.actualStartTime = -1.1;
    this.selfBaseDuration = -0;
    this.treeBaseDuration = -0;
  }

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