skinny-azure

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()

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

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!

TanStack•4y ago

skinny-azure

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()

table.getSelectedRowModel()

  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

rowSelection

Rerenders and fine grained updates using react-table with context

Similar Threads

Rerenders and fine grained updates using react-table with context

Similar Threads

Similar Threads

Similar Threads