Simple React profiler for mount phase for production environment.

react-production-profiler.js

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

const ProductionProfiler = ({ children }) => {
  const [mount, setMount] = useState(false);
  useEffect(() => {
    if (!mount) {
      console.time('profile');
      setMount(true);
    }
    else {
      console.timeEnd('profile');
    }
  }, [mount]);
  return mount ? children : null;
};

const Item = () => {
  return <div className='item'>Hello</div>;
};

render(
  <ProductionProfiler>
    {Array(1000).fill(0).map((_, index) => (
      <Item key={index} />
    ))}
  </ProductionProfiler>,
  document.querySelector('#root')
);