usePerformanceObserver

[ezekielchentnik]

performance-observer

example api:

function Logger() {
  const [entries] = usePerformanceObserver({
    entryTypes: ["measure"]
  });

  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Entry Type</th>
          <th>Start Time</th>
          <th>Duration</th>
        </tr>
      </thead>
      <tbody>
        {entries.map(entry => (
          <tr key={entry.name}>
            <td>{entry.name}</td>
            <td>{entry.entryType}</td>
            <td>{entry.startTime}</td>
            <td>{entry.duration}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function ThingToMeasure() {
  const [performance] = useGlobal(["performance"]); // pass window.performance through context

  function measureClick(evt) {
    performance.measure("button clicked");
  }

  return <button onClick={measureClick}>Measure</button>;
}