react-table v7 editable cell and performance issues

greg59650 commented 1 year ago

Describe the bug

use react-table v7 to display a table with more than 10 columns and more than 1000 rows.

To this table I add a cell editable for each cell.

As in the following example:

https://codesandbox.io/s/compassionate-keller-jyhoed

The problem is that loading the grid or modifying a cell can sometimes take several seconds, which makes the editable function unusable in production mode.

I think the problem comes from the updateMyData function which has to go through each cell to check if the old value matches the new one.

 const updateMyData = (rowIndex, columnId, value) => {
  setData(old =>
  old.map((row, index) => {
    if (index === rowIndex) {
      return {
        ...old[rowIndex],
        [columnId]: value,
      }
    }
    return row
  })
  )
}

Is there a solution to improve the rendering performance?

Your minimal, reproducible example

https://codesandbox.io/s/compassionate-keller-jyhoed

Steps to reproduce

https://codesandbox.io/s/compassionate-keller-jyhoed

Expected behavior

At each cell change the time can take a second or more.

How often does this bug happen?

No response

Screenshots or Videos

No response

Platform

windows

react-table version

7.7.0

TypeScript version

No response

Additional context

No response

Terms & Code of Conduct

[X] I agree to follow this project's Code of Conduct
[X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

MihirGH commented 1 year ago

I am facing similar issue in v7.1.0 In my case when a particular cell changes I don't have any choice but to pass a new reference to data array with that particular cell. Since the data reference changes this useMemo is called again and it creates the new reference for the cell, value and other methods such as render, getRowProps etc and React.memo fails on my side

MihirGH commented 1 year ago

@greg59650 were you able to find any workarounds for this?

alexbezhan commented 1 year ago

I have same issue with v8. Not sure what to do here. When I edit one row, I have to modify the entire data array, and it causes all the models(CoreModel, GroupedModel, etc) to recalculate which takes about 6s for my table, which is a UX nightmare.

Chabelle78 commented 2 months ago

Hi @alexbezhan did you found solution with the V8 ? I've got the same problem. Thanks for your help

alexbezhan commented 2 months ago

Hi @alexbezhan did you found solution with the V8 ? I've got the same problem. Thanks for your help

I implemented table myself, throwing away react and libraries. Honestly it was the best decision, I should have done it from the beginning.

Chabelle78 commented 2 months ago

@alexbezhan thank you for your answer ;)

TanStack / table