SchedulingEventInfo() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ SchedulingEventInfo() — react Function Reference

Dependency Diagram

graph TD
  36951d8a_fa01_8830_d369_8ba25c7e8a31["SchedulingEventInfo()"]
  8a53e3b1_7d98_d6cb_d776_c4171cd9ac5f["SidebarEventInfo.js"]
  36951d8a_fa01_8830_d369_8ba25c7e8a31 -->|defined in| 8a53e3b1_7d98_d6cb_d776_c4171cd9ac5f
  style 36951d8a_fa01_8830_d369_8ba25c7e8a31 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js lines 57–116

function SchedulingEventInfo({eventInfo}: SchedulingEventProps) {
  const {componentName, timestamp} = eventInfo;
  const componentStack = eventInfo.componentStack || null;

  return (
    <>
      <div className={styles.Toolbar}>
        {componentName} {getSchedulingEventLabel(eventInfo)}
      </div>
      <div className={styles.Content} tabIndex={0}>
        <ul className={styles.List}>
          <li className={styles.ListItem}>
            <label className={styles.Label}>Timestamp</label>:{' '}
            <span className={styles.Value}>{formatTimestamp(timestamp)}</span>
          </li>
          {componentStack && (
            <li className={styles.ListItem}>
              <div className={styles.Row}>
                <label className={styles.Label}>Rendered by</label>
                <Button
                  onClick={withPermissionsCheck(
                    {permissions: ['clipboardWrite']},
                    () => copy(componentStack),
                  )}
                  title="Copy component stack to clipboard">
                  <ButtonIcon type="copy" />
                </Button>
              </div>
              <ul className={styles.List}>
                {stackToComponentLocations(componentStack).map(
                  ([displayName, location], index) => {
                    if (location == null) {
                      return (
                        <li key={index}>
                          <Button
                            className={styles.UnclickableSource}
                            disabled={true}>
                            {displayName}
                          </Button>
                        </li>
                      );
                    }

                    return (
                      <FunctionLocation
                        key={index}
                        displayName={displayName}
                        location={location}
                      />
                    );
                  },
                )}
              </ul>
            </li>
          )}
        </ul>
      </div>
    </>
  );
}