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