describeValue() — react Function Reference

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

Function javascript BabelCompiler Validation calls 1 called by 2

Entity Profile

BabelCompiler→ Validation→ describeValue() — react Function Reference

Dependency Diagram

graph TD
  6fb3c8d9_f609_4f23_100b_f5e78e47c0fd["describeValue()"]
  e98a87b8_beb4_9d09_4d2f_78427872f8a3["ReactFiberHydrationDiffs.js"]
  6fb3c8d9_f609_4f23_100b_f5e78e47c0fd -->|defined in| e98a87b8_beb4_9d09_4d2f_78427872f8a3
  f70bda65_503f_5299_be1d_ced97c87a0f6["describePropValue()"]
  f70bda65_503f_5299_be1d_ced97c87a0f6 -->|calls| 6fb3c8d9_f609_4f23_100b_f5e78e47c0fd
  eecf080f_b1bf_30f4_07ee_7885ab3bb177["describePropertiesDiff()"]
  eecf080f_b1bf_30f4_07ee_7885ab3bb177 -->|calls| 6fb3c8d9_f609_4f23_100b_f5e78e47c0fd
  b00fba94_63af_affe_dc43_a6e15740cbd3["objectName()"]
  6fb3c8d9_f609_4f23_100b_f5e78e47c0fd -->|calls| b00fba94_63af_affe_dc43_a6e15740cbd3
  style 6fb3c8d9_f609_4f23_100b_f5e78e47c0fd fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-reconciler/src/ReactFiberHydrationDiffs.js lines 181–243

function describeValue(value: mixed, maxLength: number): string {
  switch (typeof value) {
    case 'string': {
      const encoded = JSON.stringify(value);
      if (encoded.length > maxLength) {
        if (maxLength < 5) {
          return '"..."';
        }
        return encoded.slice(0, maxLength - 4) + '..."';
      }
      return encoded;
    }
    case 'object': {
      if (value === null) {
        return 'null';
      }
      if (isArray(value)) {
        return '[...]';
      }
      if ((value: any).$$typeof === REACT_ELEMENT_TYPE) {
        const type = getComponentNameFromType((value: any).type);
        return type ? '<' + type + '>' : '<...>';
      }
      const name = objectName(value);
      if (name === 'Object') {
        let properties = '';
        maxLength -= 2;
        for (let propName in value) {
          if (!value.hasOwnProperty(propName)) {
            continue;
          }
          const jsonPropName = JSON.stringify(propName);
          if (jsonPropName !== '"' + propName + '"') {
            propName = jsonPropName;
          }
          maxLength -= propName.length - 2;
          const propValue = describeValue(
            value[propName],
            maxLength < 15 ? maxLength : 15,
          );
          maxLength -= propValue.length;
          if (maxLength < 0) {
            properties += properties === '' ? '...' : ', ...';
            break;
          }
          properties +=
            (properties === '' ? '' : ',') + propName + ':' + propValue;
        }
        return '{' + properties + '}';
      } else if (enableSrcObject && (name === 'Blob' || name === 'File')) {
        return name + ':' + (value: any).type;
      }
      return name;
    }
    case 'function': {
      const name = (value: any).displayName || value.name;
      return name ? 'function ' + name : 'function';
    }
    default:
      // eslint-disable-next-line react-internal/safe-string-coercion
      return String(value);
  }
}