T
TanStack•13mo ago
stormy-gold

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?
2 Replies
stormy-gold
stormy-goldOP•13mo ago
This also only seems to happen on dev mode, i tried removing the strict mode and it still happens on another note i believe related to this, when i go to one page, and go back with the browser arrows i get a TON of re-renders in this simple page 
export const Route = createFileRoute('/')({
    component: () => {
        console.log('Hello !');
        return <div>Hello !</div>;
    },
});
export const Route = createFileRoute('/')({
    component: () => {
        console.log('Hello !');
        return <div>Hello !</div>;
    },
});
conscious-sapphire
conscious-sapphire•13mo ago
can you please provide a complete minimal example , e.g. by forking one the existing examples on stackblitz?

Did you find this page helpful?