Sorting indicators does not update when using React.memo

[nimabrownlee]

Describe the bug (required) When React.memo is used to render the columns/headers, the sorting booleans, does not trigger a re-render.

Provide an example via Codesandbox! (required) https://codesandbox.io/s/quizzical-feynman-f2y8l?file=/pages/index.js

Steps To Reproduce (required) Try to sort using the codesandbox above.

Expected behavior (Recommended) It should trigger a re-render.

Desktop (please complete the following information):

• OS: [e.g. iOS] MacOS
• Browser [e.g. chrome, safari] Chrome
• Version [e.g. 22] 87+

Additional context Use the code that is commented out to see a working version.

[datner]

React.memo uses shallowEquals unless told otherwise and is supposed to stop rerenders, this is working as intended

[datner]

also unrelated to react-table

[nimabrownlee]

@datner Hey, sure. Whats the fix then? I am forced to use memo to stop huge amount of re-renders.

[datner]

Try to change the diff function, for more in-depth help ask on stack overflow or something, sorry

[anglis]

Found a workaround. First of all even though you would use table instance state it would not be useful, because it is mutated as well. So in stateReducer I added a setter for component state. It gives me immutable state which I can use in memo equality callback.

For more explanation here is codesandbox: https://codesandbox.io/s/eloquent-dream-516xnl?file=/src/App.js

[dantman]

The same thing happens when trying to use memo to speed up rendering of table rows.

React Table's row selection breaks when a table row is memoized.

https://codesandbox.io/s/eloquent-dream-516xnl?file=/src/App.js

This is a major performance issue. If I remove memo() the onScroll re-renders in my app go from 22-28ms to 80-120ms. The scroll re-renders in question being triggered by TanStack's own react-virtual.

React Table should not be re-using and mutating the row object when it when it has changed, and assuming that table components are not memoized for performance. This is fundamental to react, if this is intended behaviour then react-table is wrong. Beyond performance I understand there's also the possibility that examples like Sub Components (Lazy) and others that use extra components could encounter tearing in concurrent mode due to row being mutated during render.

Edit: Due to mutating what should be immutable, there's also the risk that React Table usage could break automatically if something like the future React Forget compiler was used.

It feels quite absurd that the React Table docs say:

It's important that we're using React.useMemo here to ensure that our data isn't recreated on every render. If we didn't use React.useMemo, the table would think it was receiving new data on every render and attempt to recalculate a lot of logic every single time. Not cool!

Yet when it comes to memoizing table elements. React Table's intended behaviour that you cannot optimize element rendering for the exact same reason.

[github-actions[bot]]

This issue is being marked as stale (no activity in the last 14 days)

[github-actions[bot]]

This issue has been detected as stale and automatically closed. It's very likely that your issue has remained here this long because it would require breaking changes to v7. React Table v8 is currently in alpha (soon beta!) and already contains bug fixes, performance improvements and architectural changes that likely address this issue.

• If your v7 issue has been previously labeled as requiring breaking changes, please try the new v8 alpha/beta releases
• If your v7 issue has not already been labeled as a breaking change, open a new issue.
• If this was a v8 issue and was closed by mistake, please reopen or leave a comment below.