0

So we have been trying to solve this for hours and cant figure out whats the issue. I am afraid I cant include any code due to the companies policy, but I can include a sample code with an explanation.

Basically we have a function where we select all the table rows from the controller (simplified). Example:

 selectAllRows = action(() => {
    this.data.forEach(r=> {
      this.selectTableRow(r, tableInstance)
    })
 })

and selectTableRow is just a simple function which sets the value to an observable object:

selectTableRow = action((row, tableInstance) => {
    tableInstance.multiSelectedRows[row.id] = row.id
})

So when we have lets say 100 rows and we select by calling a button and calling selectAllRows function via onClick method or if we call it directly in componentDidMount life cycle, the table rows are selected instantly, no problems - all good.

As soon as this function is being called from anywhere else lets say if we call it from the esc key listener, or we wrap it with the setTimeout funcion. As soon as that function gets executed, it hangs the UI for a second or 2 and then selects the rows as normal - render issue, problem unknown.

So the problem is that we cant understand why the same function is working fine when its being called directly and not when its wrapped within the async function.

Any tips or if someone recognises the problem and can help us out would be appreciated!

EDITED: Also to note, we removed all the action wrapping from the functions and did the same test, and it was the same problem. onClick call executed fast and the other one slow.

AlwaysConfused
  • 729
  • 2
  • 12
  • 37
  • Did you try wrapping it in runInAction(() => selectTableRow(..)), since when updating mobx state in async method, you need to wrap it? – zhuber Sep 30 '20 at 10:14
  • Yes we tried that as well - no change. Just to note that the function itself is not async. Its the way that function is being executed only. Because setTimeout will execute that func async but the actual function is not async one. – AlwaysConfused Sep 30 '20 at 10:19
  • Can you send the basic data model of tableInstance? It would be best if you could create some similar example in codesandbox... – zhuber Sep 30 '20 at 10:32
  • 1
    Table instance is a big controller file where the table is initiated and all the settings are created. I have tried to create a demo in codesandbox but it seems like its a hassle to setup the exact env. I might do it later on again – AlwaysConfused Sep 30 '20 at 10:34

1 Answers1

0

We managed to solve by updating all the libraries (we do that anyway every 2 weeks), but it seems like it was the mobx issue as after the mobx got updated it fixed this problem.

AlwaysConfused
  • 729
  • 2
  • 12
  • 37