Any help on avoiding whole-table re-renders on toggling expand state?

[akdor1154]

Hey all,
I'm struggling a bit with performance on medium-sized tables. My table is taking about 500ms to re-render when all I do is toggle expanding a single group. Are there any hints on avoiding rendering all my rows (instead of just the expanded/unexpanded one)?

I've tried using useMemo inside my return block, e.g.

return (
<table>
  {rows.map((row, id) => useMemo(
    () => <tr ...getRowProps() />,
    [row] // or even [row.id row.isExpanded] just for fun
  ))}
</table>
)

but this does not seem to work (re-rendering still occurs). I guess this is due to the Rules of Hooks:

• Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions.
• Only call Hooks from React function components. Don’t call Hooks from regular JavaScript functions. (There is just one other valid place to call Hooks — your own custom Hooks. We’ll learn about them in a moment.)
  (from https://reactjs.org/docs/hooks-overview.html)

Can anyone advise on a good pattern for doing this?

[rvashishth]

https://react-table.js.org/faq#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes
you can possibly use autoResetExpanded: false in useTable options. This will stop the table re-rendering on expand toggle.

[akdor1154]

Thanks for the reply - unfortunately this does not prevent re-rendering, it only prevents resetting the expanded state. I do actually have this property set for its purpose.

[kev946]

I recently faced this issue. Basically I have a useEffect in my table component that depends on expanded state and will set a row's subRows property after it is expanded. Then I render the table again with the subRows set on the expanded row. I guess this is sort of like lazy loading the expanded rows and it greatly increased performance for me.

[BrianMitchL]

@kev946 Could you provide any more details of how you implemented this? I'm trying to do the same, but am in cyclical dependency loops with effect dependencies of the expanded state and data changing.

My use-case is for a fully controlled/manual table (sorting, pagination, filtering), so that could be where this approach falls short too.

[yeomann]

yes same, trying to understand why loop is not stoping and where is it coming from...