CODEWITHSUNDEEP
reactjsreact-selectreact-table
Théophile
Théophile

Reputation: 1031

react-table is extremely slow with react-select: how to speed it up?

I have a table of editable data that's displayed with react-table. I'm using react-select for the cells. Whenever I change an entry, it takes a long time (close to a second) for the page to update. How can I speed this up?

Here's a fork of the official "editable table" example: https://codesandbox.io/s/gracious-cdn-fcu3i?file=/src/App.js, modified to use <Select> instead of <input>.

Part of the code from that official example updates the data on blur:

 // We'll only update the external data when the input is blurred
  const onBlur = () => {
    updateMyData(index, id, value)
  }

This means that even tabbing through the elements is extremely slow. I was able to address that by adding a check in updateMyData to abort if the data didn't actually change:

const updateMyData = (rowIndex, columnId, value) => {
  if (data[rowIndex][columnId] === value) return;

  etc. // (otherwise update)
}

So that fixes the tabbing issue, I believe, but what about data entry? Could it be made asynchronous, for example, or would that have dangerous consequences?

Upvotes: 0

Views: 3873

Answers (1)

Nadia Chibrikova
Nadia Chibrikova

Reputation: 5036

The reason they use onBlur with inputs is to avoid re-rendering the whole table after each keystroke, with selects you don't have the same problem, so you don't need to use onBlur at all, just report the update in the onChange handler (no need to keep the value in the cell state either). Saying that, the whole solution doesn't look particularly efficient - after each change the table is re-rendered twice. I've wrapped updateMyState into useCallback and SelectCell in memo, which seems to make it a bit better, but you might want to find another approach, particularly if you have a big table. Anyways, have a look here https://codesandbox.io/s/tender-night-vymfi?file=/src/App.js

Upvotes: 1

Related Questions