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!

dpren · Accepted Answer · 2018-07-19 16:45:03Z

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.

answered Jul 19, 2018 at 16:45

dpren

1,33514 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bdsg4D Over a year ago

When my testing my application I found that Cell function is called once per row, every time there is a change any where in the grid. Essentially, to prove that the entire page is re-rendered, I am using the timestamps as it was bit complex to debug in sandbox.

bdsg4D Over a year ago

I have gone through react-table source code and figured that it generates key for row-group div (trGroup). As a result only the rows that are "actually" updated are re-rendered.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related