#149 How do you calculate Page load time in React?

There are several ways to calculate and monitor it.

---

🔹 1. Using Performance API (Browser’s built-in API)

JavaScript provides the performance object to measure page load metrics.

✅ Example in React:

import React, { useEffect } from "react";

export default function App() {
  useEffect(() => {
    const [navigation] = performance.getEntriesByType("navigation");

    console.log("Page Load Time:", navigation.loadEventEnd - navigation.startTime, "ms");
    console.log("DOM Content Loaded:", navigation.domContentLoadedEventEnd - navigation.startTime, "ms");
  }, []);

  return <h1>Check console for Page Load Time</h1>;
}

👉 This logs how long it took for the page to fully load.

---

🔹 2. Using performance.now()

You can measure specific component render times.

✅ Example:

import React, { useEffect } from "react";

export default function HeavyComponent() {
  const start = performance.now();

  useEffect(() => {
    const end = performance.now();
    console.log("Component Render Time:", end - start, "ms");
  }, []);

  return <h2>Heavy Component Loaded</h2>;
}

👉 Helps track how long a specific React component took to mount.

---

🔹 3. Using React Profiler API

React provides a Profiler component to measure rendering time.

✅ Example:

import React, { Profiler } from "react";

function onRenderCallback(
  id, // the Profiler id
  phase, // "mount" or "update"
  actualDuration // time spent rendering
) {
  console.log(`${id} (${phase}) took ${actualDuration} ms`);
}

export default function App() {
  return (
    <Profiler id="AppProfiler" onRender={onRenderCallback}>
      <h1>Hello, React!</h1>
    </Profiler>
  );
}

👉 Logs how much time rendering took for components.

---

🔹 4. Using Lighthouse (Chrome DevTools)

• Open Chrome → Inspect → Lighthouse tab → Run Audit.
• Provides First Contentful Paint (FCP), Largest Contentful Paint (LCP), and total page load time.
• Useful for production performance analysis.

---

🔹 5. Using Analytics Tools (Optional in Teams)

• Tools like New Relic, Datadog, Google Analytics, Sentry can capture page load times in real-world usage.

---

✅ Short Interview Answer

“We can calculate page load time in React using the Performance API (performance.getEntriesByType("navigation")), or measure component render times with performance.now() and React’s Profiler. For real-world monitoring, we use Lighthouse or analytics tools like New Relic or Google Analytics.”