WhatChanged() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ WhatChanged() — react Function Reference

Dependency Diagram

graph TD
  a8ba359b_010b_f4bf_4c0f_5d6da6d37ad9["WhatChanged()"]
  5e16f57b_1380_519b_fff9_378869430fab["WhatChanged.js"]
  a8ba359b_010b_f4bf_4c0f_5d6da6d37ad9 -->|defined in| 5e16f57b_1380_519b_fff9_378869430fab
  style a8ba359b_010b_f4bf_4c0f_5d6da6d37ad9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js lines 24–153

export default function WhatChanged({
  fiberID,
  displayMode = 'detailed',
}: Props): React.Node {
  const {profilerStore} = useContext(StoreContext);
  const {rootID, selectedCommitIndex} = useContext(ProfilerContext);

  // TRICKY
  // Handle edge case where no commit is selected because of a min-duration filter update.
  // If the commit index is null, suspending for data below would throw an error.
  // TODO (ProfilerContext) This check should not be necessary.
  if (selectedCommitIndex === null) {
    return null;
  }

  const {changeDescriptions} = profilerStore.getCommitData(
    ((rootID: any): number),
    selectedCommitIndex,
  );

  if (changeDescriptions === null) {
    return null;
  }

  const changeDescription = changeDescriptions.get(fiberID);
  if (changeDescription == null) {
    return null;
  }

  const {context, didHooksChange, hooks, isFirstMount, props, state} =
    changeDescription;

  if (isFirstMount) {
    return (
      <div className={styles.Component}>
        <label className={styles.Label}>Why did this render?</label>
        <div className={styles.Item}>
          This is the first time the component rendered.
        </div>
      </div>
    );
  }

  const changes = [];

  if (context === true) {
    changes.push(
      <div key="context" className={styles.Item}>
        • Context changed
      </div>,
    );
  } else if (
    typeof context === 'object' &&
    context !== null &&
    context.length !== 0
  ) {
    changes.push(
      <div key="context" className={styles.Item}>
        • Context changed:
        {context.map(key => (
          <span key={key} className={styles.Key}>
            {key}
          </span>
        ))}
      </div>,
    );
  }

  if (didHooksChange) {
    if (Array.isArray(hooks)) {
      changes.push(
        <div key="hooks" className={styles.Item}>
          <HookChangeSummary
            hooks={hooks}
            fiberID={fiberID}
            state={state}
            displayMode={displayMode}
          />
        </div>,
      );
    } else {