reactjsreact-devtools

What does the duration in "Rendered at" section mean?

What does the 5.8s for 24.2ms means?

Found the source code react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js#L97

const listItems = [];
  let i = 0;
  for (i = 0; i < commitIndices.length; i++) {
    const commitIndex = commitIndices[i];

    const {duration, timestamp} = profilerStore.getCommitData(
      ((rootID: any): number),
      commitIndex,
    );

    listItems.push(
      <button
        key={commitIndex}
        ref={selectedCommitIndex === commitIndex ? selectedListItemRef : null}
        className={
          selectedCommitIndex === commitIndex
            ? styles.CurrentCommit
            : styles.Commit
        }
        onClick={() => selectCommitIndex(commitIndex)}>
        {formatTime(timestamp)}s for {formatDuration(duration)}ms
      </button>,
    );
  }

Don't know what are duration and timestamp means.

enter image description here

Solution

  • "Rendered at:" lists all the time points at which that specific component rendered (initial / rerenders) during the recorded period.

    The initial time value (5.8s in the screenshot) is how long since the start of recording (the little red circle was pressed) the component started (not triggered) a render.

    The second time value (24.2ms in the screenshot) is how long the component took to complete the render.