TanStackT
TanStack•2y ago
colossal-harlequin

Infinite rerenders with preload of 'intent' on data table

Im trying to wrap my head around this problem. I'm noticing the preload of the link component is preventing the page from navigating and causing infinite rerenders on the data table cells. if i turn off pre loading it navigates.

If i set a staletime on the query being passed it manually to the query, i still have this problem. Is useSuspenseQuery the problem here, always being called?

i am sure this is a skill issue on my end 

export const router = createRouter({
    routeTree,
    context: {
        queryClient,
    },
    defaultPreload: 'intent',
    defaultPreloadStaleTime: 0,
})


function PropertyTable() {
    const { data, isLoading } = useSuspenseQuery(propertyQueries.list())

    const columnHelper = createColumnHelper<(typeof data.data)[number]>()

    const columns = useMemo(
        () => [
            columnHelper.display({
                id: 'openRecord',
                size: 50,
                meta: {
                    sizeIsSet: true,
                    className: 'px-0 border-r border-border',
                },
                cell: ({ row }) => (
                    <Button variant="ghost" size="icon" asChild>
                        <Link to={`/listings/manage/$id`} params={{ id: row.original.id.toString() }} preload="intent">
                            <CircleArrowOutUpRight className="w-4 h-4 text-muted-foreground" />
                        </Link>
                    </Button>
                ),
            }),
        ],
        [columnHelper],
    )
    return <DataTable data={data.data} columns={columns} />
}
Was this page helpful?