Discrepancy in Performance Timings between Chrome and Firefox for React App Rendering

61 views Asked by At

I'm facing an issue while trying to measure performance timings within a React app. I've created a simplified version of the app specifically for accurate measurement, as my main application is much larger and contains elements that might affect performance measurements. Below is the code snippet for the simplified React app:

In order to replicate the conditions of my larger application more accurately, I manually transcribed the HTML elements from my main application into JSX within this simplified app. This provides a static representation of what would typically be rendered in my main application.

import { useState, useCallback, useEffect } from "react";
import axios from "./axios-config";
import "./App.css";

const App = () => {
  const [data, setData] = useState(false);

  const handleFetch = useCallback(async () => {
    setData(false);
    const url =
      "url_of_the_post_req_from_the_reall_app";
    const body = JSON.stringify({body_of_the_post_req_from_the_reall_app},
    });

    await axios.post(url);
    setData(true);
  }, []);


  useEffect(() => {
    handleFetch();
  }, [handleFetch]);


  if (!data) return <div>Loading</div>;
  
  // Here, the static JSX I've copied from my main app
  return <div>{static jsx}</div>;
};

export default App;

Two main issues have arisen:

1. The Chrome Performance Tool and Firefox Performance Tool seem to provide different timing results. I've included screenshots of both tools for your reference:

Chrome Performance Tool Screenshot - took 56ms to render the data

Firefox Performance Tool Screenshot - took 200ms to render the data

(the duration is from the completion of the POST request until the page rendering was completed and visible in the screenshot.)

2. I'm also concerned about rendering time. It's widely understood that rendering a simple page should typically take less than 16ms. However, I've noticed that even in this minimal app with minimal logic, the rendering time appears to exceed this expected threshold.

0

There are 0 answers