describeCollapsedElement() — react Function Reference

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

Function javascript CompilerCore Gating calls 2 called by 1

Entity Profile

CompilerCore→ Gating→ describeCollapsedElement() — react Function Reference

Dependency Diagram

graph TD
  8dd0c241_2c59_3a6e_fe7f_f6ec4236fc44["describeCollapsedElement()"]
  fad131a3_4814_f00f_eff0_f4871d78d1d5["ReactFiberHydrationDiffs.js"]
  8dd0c241_2c59_3a6e_fe7f_f6ec4236fc44 -->|defined in| fad131a3_4814_f00f_eff0_f4871d78d1d5
  8bd49865_512f_f170_e671_30aadd8f9b12["describeNode()"]
  8bd49865_512f_f170_e671_30aadd8f9b12 -->|calls| 8dd0c241_2c59_3a6e_fe7f_f6ec4236fc44
  31db0dac_d27e_e9b1_247d_fdfdb6113b48["describePropValue()"]
  8dd0c241_2c59_3a6e_fe7f_f6ec4236fc44 -->|calls| 31db0dac_d27e_e9b1_247d_fdfdb6113b48
  9cf5a83f_33ca_394b_9e3f_0278c28d7847["indentation()"]
  8dd0c241_2c59_3a6e_fe7f_f6ec4236fc44 -->|calls| 9cf5a83f_33ca_394b_9e3f_0278c28d7847
  style 8dd0c241_2c59_3a6e_fe7f_f6ec4236fc44 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-reconciler/src/ReactFiberHydrationDiffs.js lines 258–288

function describeCollapsedElement(
  type: string,
  props: {[propName: string]: mixed},
  indent: number,
): string {
  // This function tries to fit the props into a single line for non-essential elements.
  // We also ignore children because we're not going deeper.

  let maxLength = maxRowLength - indent * 2 - type.length - 2;

  let content = '';

  for (const propName in props) {
    if (!props.hasOwnProperty(propName)) {
      continue;
    }
    if (propName === 'children') {
      // Ignored.
      continue;
    }
    const propValue = describePropValue(props[propName], 15);
    maxLength -= propName.length + propValue.length + 2;
    if (maxLength < 0) {
      content += ' ...';
      break;
    }
    content += ' ' + propName + '=' + propValue;
  }

  return indentation(indent) + '<' + type + content + '>\n';
}