sleepless
sleepless•3w ago

Infinite loop trying to use preloadQuery and usePreloadedQuery

I am essentially trying to copy this pattern from the better-auth examples https://github.com/get-convex/better-auth/blob/main/examples/next/app/(auth)/dashboard/server/client.tsx I end up with an infinite loop somehow 
Cannot update a component (`Router`) while rendering a different component (`default`). To locate the bad setState() call inside `default`, follow the stack trace as described in https://react.dev/link/setstate-in-render
Cannot update a component (`Router`) while rendering a different component (`default`). To locate the bad setState() call inside `default`, follow the stack trace as described in https://react.dev/link/setstate-in-render
I'm not sure what's causing the loop. Even weirder, it still happens even if I remove the useEffect completely and have just this: 
// app/(root)/pricing/PricingPageClient.tsx
export const PricingPageClient = ({ preloadedUser }: { preloadedUser: Preloaded<typeof api.auth.getCurrentUser> }) => {
  const { isLoading } = useConvexAuth();
  const user = usePreloadedQuery(preloadedUser);

  if (isLoading) return <div>Loading...</div>;
  return (
    <>
      <PricingPageServer user={user} />
    </>
  );
};
// app/(root)/pricing/PricingPageClient.tsx
export const PricingPageClient = ({ preloadedUser }: { preloadedUser: Preloaded<typeof api.auth.getCurrentUser> }) => {
  const { isLoading } = useConvexAuth();
  const user = usePreloadedQuery(preloadedUser);

  if (isLoading) return <div>Loading...</div>;
  return (
    <>
      <PricingPageServer user={user} />
    </>
  );
};
I even tried replacing my PricingPageServer with a very simple component that doesn't do anything, same issue 
"use server";

import { User } from "@/convex/schema";

export default async function TestComponent({ user }: { user: User | null }) {
  return <pre>{JSON.stringify(user, null, "\t")}</pre>;
}
"use server";

import { User } from "@/convex/schema";

export default async function TestComponent({ user }: { user: User | null }) {
  return <pre>{JSON.stringify(user, null, "\t")}</pre>;
}
A bit more details here https://discord.com/channels/1019350475847499849/1365754331873415440/1408139827714588802
2 Replies
Convex Bot
Convex Bot•3w ago
Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!
erquhart
erquhart•3w ago

Did you find this page helpful?