badHookExample.js

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

const usePerformance = initialTimestamp => {
  const [timings, updateTimings] = useState([]);
  let prev = initialTimestamp;

  useEffect(() => {
    const newTimestamp = new Date().getTime();

    updateTimings([...timings, newTimestamp - prev]);
    prev = newTimestamp;
  });

  return timings;
};

const App = () => {
  const timings = usePerformance(new Date().getTime());

  return (
    <div>
      <div>Performance timings </div>
      <div>
        {timings.map((time, i) => (
          <div key={i}>
            Re-render number {i} took {time}
            ms
          </div>
        ))}
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));