Function addObjectDiffToProperties

packages/shared/ReactPerformanceTrackProperties.js:247–373

(
  prev: Object,
  next: Object,
  properties: Array<[string, string]>,
  indent: number,
)

const UNCHANGED = '\u2007\xa0';

export function addObjectDiffToProperties(
  prev: Object,
  next: Object,
  properties: Array<[string, string]>,
  indent: number,
): boolean {
  // Note: We diff even non-owned properties here but things that are shared end up just the same.
  // If a property is added or removed, we just emit the property name and omit the value it had.
  // Mainly for performance. We need to minimize to only relevant information.
  let isDeeplyEqual = true;
  for (const key in prev) {
    if (!(key in next)) {
      properties.push([REMOVED + '\xa0\xa0'.repeat(indent) + key, '\u2026']);
      isDeeplyEqual = false;
    }
  }
  for (const key in next) {
    if (key in prev) {
      const prevValue = prev[key];
      const nextValue = next[key];
      if (prevValue !== nextValue) {
        if (indent === 0 && key === 'children') {
          // Omit any change inside the top level children prop since it's expected to change
          // with any change to children of the component and their props will be logged
          // elsewhere but still mark it as a cause of render.
          const line = '\xa0\xa0'.repeat(indent) + key;
          properties.push([REMOVED + line, '\u2026'], [ADDED + line, '\u2026']);
          isDeeplyEqual = false;
          continue;
        }
        if (indent >= 3) {
          // Just fallthrough to print the two values if we're deep.
          // This will skip nested properties of the objects.
        } else if (
          typeof prevValue === 'object' &&
          typeof nextValue === 'object' &&
          prevValue !== null &&
          nextValue !== null &&
          prevValue.$$typeof === nextValue.$$typeof
        ) {
          if (nextValue.$$typeof === REACT_ELEMENT_TYPE) {
            if (
              prevValue.type === nextValue.type &&
              prevValue.key === nextValue.key
            ) {
              // If the only thing that has changed is the props of a nested element, then
              // we omit the props because it is likely to be represented as a diff elsewhere.
              const typeName =
                getComponentNameFromType(nextValue.type) || '\u2026';
              const line = '\xa0\xa0'.repeat(indent) + key;
              const desc = '<' + typeName + ' \u2026 />';
              properties.push([REMOVED + line, desc], [ADDED + line, desc]);
              isDeeplyEqual = false;
              continue;
            }
          } else {
            // $FlowFixMe[method-unbinding]
            const prevKind = Object.prototype.toString.call(prevValue);