I am trying to add some logging to see how much time it takes to render a functional component in React. The tricky part to me is how to actually tell when the component has been rendered. By "rendered", it means the user can see it in the front end (all parts in that component should be displayed). I am trying to use useEffect to achieve this, as it can tell when the component is mounted.

The code is something like below:

function showComponent() {
   console.log('start rendering....start timer');
   console.log(new Date().getTime());
   
   setStoreViewState('foobar');
}

observer(function Component() {
   React.useEffect(() => {
     console.log('rendering complete....stop timer');
     console.log(new Date().getTime());
 }, []);
   ......
   const thingsToShow = getStoreViewState();
   return (<div>{thingsToShow}</div>)
}

I am wondering if this is an accurate way to achieve this. Thanks!