usePerformanceTiming

index.tsx

import {useRef, useLayoutEffect} from 'react';

interface PerformanceTiming {
    firstRender: number;
    firstLayout: number;
    firstMeaningfulRender: number;
    firstMeaningfulLayout: number;
}

const usePerformanceRecord = () => {
    const time = useRef(0);
    return {
        time: time.current,
        record() {
            if (!time.current) {
                time.current = performance.now();
            }
        },
    };
};

const usePerformanceTiming = (isCurrentlyMeaningful: boolean, callback: (timing: PerformanceTiming) => void) => {
    const firstRender = usePerformanceRecord();
    const firstLayout = usePerformanceRecord();
    const firstMeaningfulRender = usePerformanceRecord();
    const hasMeaningfulLayout = useRef(false);

    firstRender.record();
    isCurrentlyMeaningful && firstMeaningfulRender.record();

    useLayoutEffect(
        () => {
            firstLayout.record();
            if (!hasMeaningfulLayout) {
                hasMeaningfulLayout.current = true;
                const timing = {
                    firstRender: firstRender.time,
                    firstLayout: firstLayout.time,
                    firstMeaningfulRender: firstMeaningfulRender.time,
                    firstMeaningfulLayout: performance.now(),
                };
                callback(timing);
            }
        },
        [isCurrentlyMeaningful]
    );
};

const Foo = () => {
    const {loading, data} = useFetch(api);
    usePerformanceTiming(!!data, timing => console.log(timing));

    return (
        <div>
            {data}
        </div>
    );
};