Fibers() — react Function Reference

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

Function javascript CompilerCore Suppression calls 2

Entity Profile

CompilerCore→ Suppression→ Fibers() — react Function Reference

Dependency Diagram

graph TD
  428e6a9d_77b9_3ced_1a1b_9df2ed4d4349["Fibers()"]
  790122f0_28d2_c6d9_0a18_a7bac02259ef["Fibers.js"]
  428e6a9d_77b9_3ced_1a1b_9df2ed4d4349 -->|defined in| 790122f0_28d2_c6d9_0a18_a7bac02259ef
  aea92353_a021_c97d_ce9c_44b0f5473dc9["getFiberColor()"]
  428e6a9d_77b9_3ced_1a1b_9df2ed4d4349 -->|calls| aea92353_a021_c97d_ce9c_44b0f5473dc9
  d82708c7_e987_6c9c_1998_8eccaf8fd605["formatPriority()"]
  428e6a9d_77b9_3ced_1a1b_9df2ed4d4349 -->|calls| d82708c7_e987_6c9c_1998_8eccaf8fd605
  style 428e6a9d_77b9_3ced_1a1b_9df2ed4d4349 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/fiber-debugger/src/Fibers.js lines 257–407

export default function Fibers({fibers, show, graphSettings, ...rest}) {
  const items = Object.keys(fibers.descriptions).map(
    id => fibers.descriptions[id]
  );

  const isDragging = rest.className.indexOf('dragging') > -1;
  const [_, sdx, sdy] =
    rest.style.transform.match(/translate\((-?\d+)px,(-?\d+)px\)/) || [];
  const dx = Number(sdx);
  const dy = Number(sdy);

  return (
    <div
      {...rest}
      style={{
        width: '100%',
        height: '100%',
        position: 'absolute',
        top: 0,
        left: 0,
        ...rest.style,
        transform: null,
      }}>
      <Graph
        className="graph"
        dx={dx}
        dy={dy}
        isDragging={isDragging}
        settings={graphSettings}>
        {items.map(fiber => [
          <Vertex
            key={fiber.id}
            width={150}
            height={100}
            isActive={fiber.id === fibers.workInProgressID}>
            <div
              style={{
                width: '100%',
                height: '100%',
                backgroundColor: getFiberColor(fibers, fiber.id),
              }}
              title={
                /*prettyFormat(fiber, { plugins: [reactElement ]})*/
                'todo: this was hanging last time I tried to pretty print'
              }>
              <small>
                {fiber.tag} #{fiber.id}
              </small>
              <br />
              {fiber.type}
              <br />
              {fibers.currentIDs.indexOf(fiber.id) === -1 ? (
                <small>
                  {fiber.pendingWorkPriority !== 0 && [
                    <span key="span">
                      Needs: {formatPriority(fiber.pendingWorkPriority)}
                    </span>,
                    <br key="br" />,
                  ]}
                  {fiber.memoizedProps !== null &&
                    fiber.pendingProps !== null && [
                      fiber.memoizedProps === fiber.pendingProps
                        ? 'Can reuse memoized.'
                        : 'Cannot reuse memoized.',
                      <br key="br" />,
                    ]}
                </small>
              ) : (
                <small>Committed</small>
              )}
              {fiber.flags && [
                <br key="br" />,
                <small key="small">Effect: {fiber.flags}</small>,
              ]}
            </div>
          </Vertex>,
          fiber.child && show.child && (
            <Edge
              source={fiber.id}
              target={fiber.child}
              kind="child"