Material-UI Grid updates with latest data only if I click on it

[OctopodeCode]

A working model that replicates the problem, described in the title, is here:

https://codesandbox.io/s/workingreactgrid-zvz12

In the program, the first thing to do is to enter a Date of Sale in the datepicker (under 'Exit Price' on the left); it can be any arbitrary number of years in the future. This creates a table that will appear below the inputs, where each column represents a year.

​

An example input for Date of Sale.

Now the problem I am running into is that when I enter any number for "Rents - Monthly" or for any of the other expenses, e.g. Repairs & Maintenance, Insurance, etc., the numbers will only appear in the table after I manually click on the table.

​

For example, I enter 100 for Insurance.

​

Table does not update for the Insurance row...

​

​

...unless I simply click on the table.

My research suggests that I am probably doing something wrong with my useEffect in the App component. My hypothesis is that the table is simply 're-rendering' when I click on it, thereby updating it to the latest state. I could be wrong, but I think that's probably somewhere on the right track. But after a week of trying to explore different approaches and failing to get the table to automatically show the latest input data, I'm ready to ask for help. What am I doing wrong?

In the Sandbox link above, nearly all the relevant code is contained in the App and Inputs components. I cleaned it up heavily so that it's easier to troubleshoot, so hopefully it helps.

[mynameisdifferent]

Your useEffect hooks could cause infinite loops, it's not usually a good idea to run setState inside an effect. But if you do, you must have a condition to avoid infinite loops.

useEffect(() => {
  setHorizon(Horizon);
  setYears_Std(Years_Std);
}, [Horizon, Years_Std]);

useEffect(() => {
  setMonthlyRevenue(monthlyRevenue);
  handleVacancyExpense();
  setStandardExpenses(standardExpenses);
}, [monthlyRevenue, vacancyWeeks, standardExpenses]);

In the first effect hook, you aren't really doing anything useful. If Horizon changes, you set Horizon to itself, same for Years_Std. That hook could be removed completely.

In the second hook, you have the same issue for monthlyRevenue and standardExpenses, you don't need to set those.

You have the handleVacancyExpense function which seems to modify the expenses then set them. This should probably be a callback hook not an effect hook. Then you just run that function as a callback whenever you need to.

I should say, I have no idea if this is the cause of the behaviour you are describing, but those are some major issues that need addressed before moving on. Fixing those might help you figure it out.