twenty_crm/front/src/modules/ui/utilities/debug/components/TimingProfiler.tsx

import { Profiler } from 'react';
import { Interaction } from 'scheduler/tracing';

type OwnProps = {
  id: string;
  children: React.ReactNode;
};

export const TimingProfiler = ({ id, children }: OwnProps) => {
  const handleRender = (
    id: string,
    phase: 'mount' | 'update',
    actualDuration: number,
    baseDuration: number,
    startTime: number,
    commitTime: number,
    interactions: Set<Interaction>,
  ) => {
    console.debug(
      'TimingProfiler',
      JSON.stringify(
        {
          id,
          phase,
          actualDuration,
          baseDuration,
          startTime,
          commitTime,
          interactions,
        },
        null,
        2,
      ),
    );
  };

  return (
    <Profiler id={id} onRender={handleRender}>
      {children}
    </Profiler>
  );
};