Only re-render edited cell

Tags: #<Tag:0x00007efc64f29290>
#1

Hi,

I’m experiencing some very poor performance while editing a table that makes use of custom components (using HotColumn).
It seems that after a cell has been edited, the whole table is re-rendered making all custom components re-render. Using React.memo doesn’t seem to make any difference as components appear to be removed between table renders.

Changing a cell should at the most only render the row that cell is part of and ideally have the option to only render the edited cell.

Is there a way to circumvent this?

Thank you

#2

Hi.

Here https://github.com/handsontable/handsontable/issues/5769 is the subject that may interest you.

As you probably know, we offer wrappers for React and other JS frameworks. The calculating engine comes from the Vanilla version. That is why we’ve opened up the eco-renderers project. Adding changes to the Vanilla will benefit all the wrappers.

The project requires a lot of changes in the Handsontable core. We’ve already made some important adjustments but as stable version 8.0.0 requires additional hands we needed to pause the project. There are aspirations to continue the project later this year so I highly recommend to track new commits to https://github.com/handsontable/handsontable/issues/5769

#3

Thank you for your reply.

I had a look at the link and it seems to be something that would help with this issue.
It’s good to know that it’s a known issue and that a solution is in the works but in the meantime is there anything I can do to improve performance?

Thank you

#4

Can you share your settings @mcastro? I’ll try to send some tips.

#5

Here are the settings I’m passing to HOT, the onEdit() function is updating state outside and triggers a re-render of all cells (this is where I’d hope memoization would prevent unedited cells from re-rendering)

return {
width: ‘100%’,
height: ${tableHeight + emptySpace}px,
rowHeights: rowsHeight,
colHeaders: true,
rowHeaderWidth:
(baseFieldsSettings &&
baseFieldsSettings.extraSmall &&
baseFieldsSettings.extraSmall.width) ||
44,
columnHeaderHeight: rowsHeight,
stretchH: StretchEnum.all,
autoColSize: false,
autoRowSize: false,
afterChange: (changes: Handsontable.CellChange[] | null, source: string) =>
onEdit(equipmentSectionIndex, changes),
currentRowClassName: ‘currentRow’,
manualColumnResize: true,
licenseKey,
enterMoves: () => {
if (tableRef && tableRef.current && tableRef.current.hotInstance) {
const selected = tableRef.current.hotInstance.getSelected();
const totalRows = tableRef.current.hotInstance.countRows();
const nextRow = selected[0][0] + 1;
const nextCol = selected[0][1] + 1;
if (nextRow === totalRows) {
// go to next column
const headerColumn = columns.find((_, colIndex) => colIndex === nextCol);
if (headerColumn && headerColumn.settings && headerColumn.settings.customRenderer) {
return { row: 0, col: 0 };
}
}
}

  return { row: 1, col: 0 };
},
afterScrollVertically: () => {
  if (tableRef && tableRef.current && tableRef.current.hotInstance) {
    tableRef.current.hotInstance.destroyEditor();
  }
},
afterScrollHorizontally: () => {
  if (tableRef && tableRef.current && tableRef.current.hotInstance) {
    tableRef.current.hotInstance.destroyEditor();
  }
}

};

Any tips are welcome, thank you.

#6

Thank you for sharing @mcastro

what do you destroy editor

afterScrollVertically: () => {
  if (tableRef && tableRef.current && tableRef.current.hotInstance) {
    tableRef.current.hotInstance.destroyEditor();
  }
},
afterScrollHorizontally: () => {
  if (tableRef && tableRef.current && tableRef.current.hotInstance) {
    tableRef.current.hotInstance.destroyEditor();
  }
}
#7

I’m using a custom dropdown component that has an absolute position, the editor is destroyed to prevent having to recalculate its position on scroll

#8

Can you comment out this code and check if performance stays the same?

#9

It doesn’t seem to improve it, it’s only destroying the editor on scroll and the performance issue is more to do with editing cells

#10

I guess that in this situation I’d need to to replicate the same scenario to exclude parts of the code that do not effect the performance. Can you please create a demo for tests? You can use the JSFiddle https://jsfiddle.net/AMBudnik/fnh3L5zo/ as a base.

#11

I believe that we can close this topic as there are no new comments for nearly 2 weeks.

However, if you need anything please send me an email to support@handsontable.com

#12