T
TanStack•3y ago
stormy-gold

Rerenders and fine grained updates using react-table with context

I use @tanstack/react-table and put the useReactTable table inside a react context. It seems like the table instance stays stable and hence stuff like table.getSelectedRowModel() does not rerender when used inside the subcomponent. I want that the getter functions from react-table will force the component to rerender when it consumes a getter function value that changes. One solution that I think can work is to create another some small context providers. They will hold react state and update it on changes - for example 
  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});

const stableTable = useReactTable({
// ...
  onRowSelectionChange: setRowSelection,
 })

//...

const memoizedRowSelectionContextValue = useMemo(() => {
 return 
  {
    rowSelection,
    isAllRowsSelected: table.getIsAllRowsSelected()
  }
}, [rowSelection, stableTable])

<RowSelectionContext value={memoizedRowSelectionContextValue}/>
  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});

const stableTable = useReactTable({
// ...
  onRowSelectionChange: setRowSelection,
 })

//...

const memoizedRowSelectionContextValue = useMemo(() => {
 return 
  {
    rowSelection,
    isAllRowsSelected: table.getIsAllRowsSelected()
  }
}, [rowSelection, stableTable])

<RowSelectionContext value={memoizedRowSelectionContextValue}/>
So the rowSelection dependency change will change the context value - and I could safely get it. This is relevant to all the all the table methods (like pinning, columnSelection. columnResizing). Is it consider best practice? How to make my component to response to updates? Thanks!
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?