SidebarCommitInfo() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ SidebarCommitInfo() — react Function Reference

Dependency Diagram

graph TD
  045443ec_2e93_aab1_2553_63f3820c419e["SidebarCommitInfo()"]
  a1b99932_7927_263d_aa52_4f1dbce5079e["SidebarCommitInfo.js"]
  045443ec_2e93_aab1_2553_63f3820c419e -->|defined in| a1b99932_7927_263d_aa52_4f1dbce5079e
  style 045443ec_2e93_aab1_2553_63f3820c419e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js lines 22–115

export default function SidebarCommitInfo(_: Props): React.Node {
  const {selectedCommitIndex, rootID} = useContext(ProfilerContext);

  const {profilerStore} = useContext(StoreContext);

  if (rootID === null || selectedCommitIndex === null) {
    return <div className={styles.NothingSelected}>Nothing selected</div>;
  }

  const {
    duration,
    effectDuration,
    passiveEffectDuration,
    priorityLevel,
    timestamp,
    updaters,
  } = profilerStore.getCommitData(rootID, selectedCommitIndex);

  const hasCommitPhaseDurations =
    effectDuration !== null || passiveEffectDuration !== null;

  const commitTree =
    updaters !== null
      ? getCommitTree({
          commitIndex: selectedCommitIndex,
          profilerStore,
          rootID,
        })
      : null;

  return (
    <Fragment>
      <div className={styles.Toolbar}>Commit information</div>
      <div className={styles.Content}>
        <ul className={styles.List}>
          {priorityLevel !== null && (
            <li className={styles.ListItem}>
              <label className={styles.Label}>Priority</label>:{' '}
              <span className={styles.Value}>{priorityLevel}</span>
            </li>
          )}
          <li className={styles.ListItem}>
            <label className={styles.Label}>Committed at</label>:{' '}
            <span className={styles.Value}>{formatTime(timestamp)}s</span>
          </li>

          {!hasCommitPhaseDurations && (
            <li className={styles.ListItem}>
              <label className={styles.Label}>Render duration</label>:{' '}
              <span className={styles.Value}>{formatDuration(duration)}ms</span>
            </li>
          )}

          {hasCommitPhaseDurations && (
            <li className={styles.ListItem}>
              <label className={styles.Label}>Durations</label>
              <ul className={styles.DurationsList}>
                <li className={styles.DurationsListItem}>
                  <label className={styles.Label}>Render</label>:{' '}
                  <span className={styles.Value}>
                    {formatDuration(duration)}ms
                  </span>
                </li>
                {effectDuration !== null && (
                  <li className={styles.DurationsListItem}>
                    <label className={styles.Label}>Layout effects</label>:{' '}
                    <span className={styles.Value}>
                      {formatDuration(effectDuration)}ms
                    </span>
                  </li>
                )}
                {passiveEffectDuration !== null && (
                  <li className={styles.DurationsListItem}>
                    <label className={styles.Label}>Passive effects</label>:{' '}
                    <span className={styles.Value}>
                      {formatDuration(passiveEffectDuration)}ms
                    </span>
                  </li>
                )}
              </ul>
            </li>