describePropertiesDiff() — react Function Reference

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

Function javascript BabelCompiler Validation calls 3 called by 1

Entity Profile

BabelCompiler→ Validation→ describePropertiesDiff() — react Function Reference

Dependency Diagram

graph TD
  eecf080f_b1bf_30f4_07ee_7885ab3bb177["describePropertiesDiff()"]
  e98a87b8_beb4_9d09_4d2f_78427872f8a3["ReactFiberHydrationDiffs.js"]
  eecf080f_b1bf_30f4_07ee_7885ab3bb177 -->|defined in| e98a87b8_beb4_9d09_4d2f_78427872f8a3
  d76433b3_24cb_a703_296a_c8c399817ef2["describeElementDiff()"]
  d76433b3_24cb_a703_296a_c8c399817ef2 -->|calls| eecf080f_b1bf_30f4_07ee_7885ab3bb177
  6fb3c8d9_f609_4f23_100b_f5e78e47c0fd["describeValue()"]
  eecf080f_b1bf_30f4_07ee_7885ab3bb177 -->|calls| 6fb3c8d9_f609_4f23_100b_f5e78e47c0fd
  b3d78aa7_1781_59b0_4f7d_e52469a3f073["added()"]
  eecf080f_b1bf_30f4_07ee_7885ab3bb177 -->|calls| b3d78aa7_1781_59b0_4f7d_e52469a3f073
  5b17efcd_e1a7_5c9c_cdf5_fbe254307fa5["removed()"]
  eecf080f_b1bf_30f4_07ee_7885ab3bb177 -->|calls| 5b17efcd_e1a7_5c9c_cdf5_fbe254307fa5
  style eecf080f_b1bf_30f4_07ee_7885ab3bb177 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-reconciler/src/ReactFiberHydrationDiffs.js lines 341–375

function describePropertiesDiff(
  clientObject: {+[propName: string]: mixed},
  serverObject: {+[propName: string]: mixed},
  indent: number,
): string {
  let properties = '';
  const remainingServerProperties = assign({}, serverObject);
  for (const propName in clientObject) {
    if (!clientObject.hasOwnProperty(propName)) {
      continue;
    }
    delete remainingServerProperties[propName];
    const maxLength = maxRowLength - indent * 2 - propName.length - 2;
    const clientValue = clientObject[propName];
    const clientPropValue = describeValue(clientValue, maxLength);
    if (serverObject.hasOwnProperty(propName)) {
      const serverValue = serverObject[propName];
      const serverPropValue = describeValue(serverValue, maxLength);
      properties += added(indent) + propName + ': ' + clientPropValue + '\n';
      properties += removed(indent) + propName + ': ' + serverPropValue + '\n';
    } else {
      properties += added(indent) + propName + ': ' + clientPropValue + '\n';
    }
  }
  for (const propName in remainingServerProperties) {
    if (!remainingServerProperties.hasOwnProperty(propName)) {
      continue;
    }
    const maxLength = maxRowLength - indent * 2 - propName.length - 2;
    const serverValue = remainingServerProperties[propName];
    const serverPropValue = describeValue(serverValue, maxLength);
    properties += removed(indent) + propName + ': ' + serverPropValue + '\n';
  }
  return properties;
}