addObjectDiffToProperties() — react Function Reference

Source Code

packages/shared/ReactPerformanceTrackProperties.js lines 298–453

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;
  let prevPropertiesChecked = 0;
  for (const key in prev) {
    if (prevPropertiesChecked > OBJECT_WIDTH_LIMIT) {
      properties.push([
        'Previous object has more than ' +
          OBJECT_WIDTH_LIMIT +
          ' properties. React will not attempt to diff objects with too many properties.',
        '',
      ]);
      isDeeplyEqual = false;
      break;
    }

    if (!(key in next)) {
      properties.push([REMOVED + '\xa0\xa0'.repeat(indent) + key, '\u2026']);
      isDeeplyEqual = false;
    }
    prevPropertiesChecked++;
  }

  let nextPropertiesChecked = 0;
  for (const key in next) {
    if (nextPropertiesChecked > OBJECT_WIDTH_LIMIT) {
      properties.push([
        'Next object has more than ' +
          OBJECT_WIDTH_LIMIT +
          ' properties. React will not attempt to diff objects with too many properties.',
        '',
      ]);
      isDeeplyEqual = false;
      break;
    }

    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 &&
          readReactElementTypeof(prevValue) ===
            readReactElementTypeof(nextValue)
        ) {
          if (readReactElementTypeof(nextValue) === 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;