React-table: Data ID in react-table to prevent full re-rendering

[erfangc]

What version of React-Table are you using?

Your bug may already be fixed in the latest release. Run yarn upgrade react-table!
6.5.3

What bug are you experiencing, or what feature are you proposing?

This is a feature proposal to conditionally render rows only if their ID have changed (thus introducing the concept of a row level ID)

The scenario we are trying address is the following:

• the data prop is derived from an external state (say managed by redux and wired in through a HOC)
• one of the Column allows the user to edit a cell in-place, and on input submission dispatches an action that updates the redux store
• when the redux store is updated, the react-table instance will receive a new data prop and the entire table re-renders as expected

This introduces some performance issues:

1. the entire table is re-rendered even though a single cell in a single row was updated

If for each element in data, we provided an accessor for a row key could we use that as a hint to bypass calling render on that row?

In other words, when a row key is provided - cell level accessor(s) are no longer being invoked. It is no longer react-table's responsibility to detect cell level changes and force re-renders. It is now the custom Cell's responsibility to re-render itself

In this scenario - with row keys enabled, react-table is only responsible for laying out rows based on key ... i.e. to the extent that rows (identified by their keys) are re-arranged, inserted or removed from data

You can imagine this feature being very helpful for data intensive projects where cell values are a complex function of both the row key, column ID + the entire App's state (i.e. redux + mobx store)

Use https://codesandbox.io/s/X6npLXPRW (by clicking the "Fork" button) to reproduce the issue.

Then paste a link to your newly forked codesandbox here...

What are the steps to reproduce the issue?

1. list the steps
2. to reproduce
3. the issue

[tannerlinsley]

I like this idea. Let's chat about it more in slack! DM me.

[shaun-k9]

We are deciding between different table libraries for react+redux app and one of the major drawbacks of react table is not being able to control re-rendering of just individual rows. For example, when a single row is added or updated it will be a performance issue to re-render the entire table when you have thousands of rows. We should be able to just add the row dynamically without the need to render the entire table again.

[gary-menzel]

@shaun-k9 Despite the feature request being considered, react-table is actually not designed for rendering thousands of rows. All of the design statements and the code itself is based around a paged table (not around rendering all of the data).

Obviously, though, any PR to implement it would be seriously considered.

[ctoppel]

I am only rendering 50 rows, but each row contains an image from AWS. This is a dashboard, so when new activity occurs it adds a row at the top, which causes the entire table to rerender, and every image is again retrieved from AWS. It seems the key of each row is based off the index rather than a unique ID that I would like to pass in. Is there a way to pass a unique key to the row? or is there a solution to my problem? Thanks!

[tannerlinsley]

In v7, you are able to render rows with any key prop that you choose (this will override the automatic internal key provided in row.getRowProps()

[ctoppel]

Awesome! I am currently using the latest version 6. Will 7 be backward compatible, as I see it is hook based? If so, I will install the alpha now. Currently, the table is a wrapper around our companies old tables as well as a custom stand alone version. It will take some time to convert to a new format if that is what it requires, but I can probably do that if need be. On a side note, I love how customizable everything is, and you have done a fantastic job on React Table!

[tannerlinsley]

v7 won't be backwards compatible. It's very very different actually, since it's 100% headless now. Basically you the dev are now in charge of actually building and rendering all of your table's markup. This usually is as simple as starting with one of the v7 examples that fits your needs and going from there. v7 is still alpha, but it will be beta probably in the next week or two, so it's becoming very stable. Let me know if you have any questions, but i would start by just reading the documentation (README).

[ctoppel]

Appreciate the quick responses, and I will read the README and take it from there. Thanks!