withWebPerformance.ts

import { ComponentType, useEffect, useRef } from "react";

const withWebPerformance = <
  T extends object & { onLoaded?: (measure: PerformanceMeasure) => void }
>(
  Component: ComponentType<T>,
  name: string
) => {
  return (props: T) => {
    const { onLoaded } = props;
    const ref = useRef(0);
    useEffect(() => {
      ref.current++;
    });

    useEffect(() => {
      if (ref.current === 1) {
        return;
      }

      console.log(performance.mark(name));

      return () => {
        const measure = performance.measure(name, name);
        console.log(measure);
        onLoaded?.(measure);
      };
    }, [onLoaded]);

    return <Component {...props} />;
  };
};

export { withWebPerformance };