[v7] Accessor derivation slow with 100k+ rows

When i provide react-table v7 with good amount of rows(below case is with 100K rows and 15 columns, then getBy, makePathArray are taking long time to execute.

Is there anything we can do to optimize it ? I can see before calling getBy we are splitting by ., then in makePathArray we are doing map(d => String(d).replace('.', '_')), this thing seems to be redundant(or can be applicable at some other place also), is this good to remove ?

[tannerlinsley]

In the latest version, the table now caches the pathObjects used in column accessors via the getBy function. I would love to see if and how this improves your speeds.

Another piece to note is that the debug and timing code was removed in the latest version. You will need to edit the source to get those exact timing logs back. Here’s the location of those loggers for reference: https://github.com/tannerlinsley/react-table/blob/176986a07ad8b25907fff435e1246962dba18e47/src/hooks/useTable.js#L174-L231

[fyodore82]

I also experienced performance degradation on 25K+ rows. My code to measure performance is

console.log(new Date().toISOString(), ' useTable started')
const {...} = useTable(...)
console.log(new Date().toISOString(), ' useTable finished')

With columns like below

column = {
  accessor: 'some string'
  // ...
}

It takes 100+ seconds to execute useTable

When I’ve written my own accessor function

const accessor = (pathArr: string[], originalRow: GridRow) => {
  let cursor = originalRow
  for (const path of pathArr) {
    if (cursor == null) return cursor
    cursor = cursor[path]
  }
  return cursor
}

column = {
  id,
  accessor: accessor.bind(null, pathArr),
  //...
}

useTable completes in couple of seconds

My code may not be universal, I’ve developed it only for my project. But it may help someone else…