Loader causes re-render sometimes

Hello! im using the loader feature of tanstack router with tanstack query, and only in the first load of the page, and only sometimes, the page enters in a render cycle for around 2s, in this example i would expect the log to show onCe or twice, but its showing like 200 times

export const Route = createFileRoute('/item/$itemURL')({
    component: () => {
        console.log('ProductDetailScreen component');
        return <ProductDetailScreen />;
    },
    loader: ({ params }) => {
        console.log('ProductDetailScreen loader');
        return queryClient.prefetchQuery({
            queryFn: () => getItemInfo(params.itemURL),
            queryKey: ['item', params.itemURL],
            staleTime: 1000 * 60 * 5,
        });
    },
});

export const Route = createFileRoute('/item/$itemURL')({
    component: () => {
        console.log('ProductDetailScreen component');
        return <ProductDetailScreen />;
    },
    loader: ({ params }) => {
        console.log('ProductDetailScreen loader');
        return queryClient.prefetchQuery({
            queryFn: () => getItemInfo(params.itemURL),
            queryKey: ['item', params.itemURL],
            staleTime: 1000 * 60 * 5,
        });
    },
});

This only happens 1/4 of the times, it takes a bit and then it renders.
If i remove the loader it works as expected all of the time

I just updated to the latest version: 1.56.2 and this is still happening

Any idea why this may be happening?
What would cause the route from re rendering?

TanStack•2y ago•

3 replies

foolish-indigo

Loader causes re-render sometimes

export const Route = createFileRoute('/item/$itemURL')({
    component: () => {
        console.log('ProductDetailScreen component');
        return <ProductDetailScreen />;
    },
    loader: ({ params }) => {
        console.log('ProductDetailScreen loader');
        return queryClient.prefetchQuery({
            queryFn: () => getItemInfo(params.itemURL),
            queryKey: ['item', params.itemURL],
            staleTime: 1000 * 60 * 5,
        });
    },
});

export const Route = createFileRoute('/item/$itemURL')({
    component: () => {
        console.log('ProductDetailScreen component');
        return <ProductDetailScreen />;
    },
    loader: ({ params }) => {
        console.log('ProductDetailScreen loader');
        return queryClient.prefetchQuery({
            queryFn: () => getItemInfo(params.itemURL),
            queryKey: ['item', params.itemURL],
            staleTime: 1000 * 60 * 5,
        });
    },
});

Loader causes re-render sometimes

Similar Threads

Loader causes re-render sometimes

Similar Threads

Similar Threads

Similar Threads