We are doing a POC/evaluation for use of your product within our company inside our React app.
I have updated the App on StackBlitz at URL: Sample App
I am trying to simulate an API that fetches the rows. Although the 23 rows come from Example.json, in the final App, the number of rows which will come from the API is unknown and is dynamic.
Our requirement is to have three fixed rows at the bottom (which I have colored) with the calculations as shown in FixFormulas.js. Supply is a constant integer (a prop that comes from the Parent - App.js). The Demand row sums all the respective columns and the Delta row subtracts the column sum from the RUNNING Supply. So, the calculation is working correctly.
However, there are the following two performance issues:
This app takes about 5-7 seconds to load (or reload/refresh) on chrome/firefox. Why so much delay?
TRY THIS: For row1, Column Q1, change the value from “10” to “20” and hit return. It takes 7-8 seconds for cursor to move to the next row after which the calculations for the Demand and Delta rows are updated. Why such a HUGE delay on chrome and firefox?
Earlier, we found that Safari is OK but both Chrome and Firefox have these performance issues. Firefox being worse than chrome. Can you also investigate this more?
I believe that cell highlighting code also causes some performance issues in addition to the calculations.
Can you please provide some solutions to resolve the two performance issues on Chrome and Firefox?
Maybe there is a different way of doing the calculations or highlighting or something else that can be done to resolve the performance issues?
Thanks for your help!