How to rerender only the updated row using react-table?

Question

I am trying to implement an editable data grid using react-table. The code looks something like below:

<ReactTable
  data={data}
  columns={columns}
/>

The problem I am facing is whenever a cell value in a specific row is updated the entire visible page is re-rendered.

Here is forked sandbox from the creator of the library that illustrates the problem.

I am thinking if react-table re-renders the entire page anytime there is an update in a single cell, then it is rather inefficient. Or I am not sure if I am missing something.

Any help us much appreciated. Thanks in advance!

Answer 1

First thing to note: just because you're logging "row render called" in the Cell callback does not necessarily mean that the DOM was re-rendered. It will only re-render if the output of render is different from the previous.

In this case it is different, for every row, because you're calculating a new Date for every row. You need a way to check which row is the one being updated and only return a new date for that one.