Infinite loop trying to use preloadQuery and usePreloadedQuery

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

// 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} />
    </>
  );
};

"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>;
}