Tanstack react-query & react-table: Why does this cause an infinite rerender?

133 views Asked by At

I've been working my way backward to try to solve a bug and have now whittled it down to this. For some reason, this usage of react-query and react-table causes react to infinitely rerender and I am not sure why.

import React from 'react'
import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
import {
  useReactTable,
  createColumnHelper,
  getCoreRowModel
} from '@tanstack/react-table'

const queryClient = new QueryClient()
const columnHelper = createColumnHelper()

const columns = [
  columnHelper.accessor('thing', {
    header: 'thing',
    cell: () => ''
  })
]

const AppContextWrapper = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  )
}

const App = () => {
  const query = useQuery(['test'], () => '')

  const table = useReactTable({
    data: [],
    columns,
    getCoreRowModel: getCoreRowModel()
  })
  console.log('component triggered')

  return table.getRowModel().rows.length
}

export default AppContextWrapper
0

There are 0 answers