Infinite rerender loop

[MathisEngels]

Hi everyone,

I'm working on a Next.js project, using TanStack Query with SSR and Streaming my queries.
Recently, after trying to use useMutation, one of my component ends up in an infinite re-render loop.

The code:

/** page.tsx **/
export default async function Profile() {
  const queryClient = getQueryClient(); <- From 'Advanced Server Rendering' docs.

  ...

  // To handle API failure
  try {
    await queryClient.fetchQuery({
      queryKey: ["profile"],
      queryFn: () => getProfile(someUUID),
    });
  } catch {
    ...
  }

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <div>
        ...
        <WishlistPanel />
      </div>
    </HydrationBoundary>
  );
}

/** WishlistPanel.tsx **/
"use client";

export default function WishlistPanel() {
  const [itemQuery, profileQuery] = useSuspenseQueries({
    queries: [
      ...
      { queryKey: ["profile"], queryFn: () => getProfile(someUUID) },
    ],
  });

  ...

  return (
    <div>
      <WishlistCTA />
      ...
      {Display some profileQuery.data}
    </div>
  );
}

/** WishlistCTA.tsx **/
"use client";

export default function WishlistCTA() {
  console.log("rendering cta");
  const queryClient = getQueryClient();

  const { data: profile } = useSuspenseQuery({
    queryKey: ["profile"],
    queryFn: () => getProfile(someUUID),
  });

  const { mutate: togglePrivacy, isPending } = useMutation({
    mutationFn: () => {
      return patchWishlist(someUUID, !profile.wishlist.private);
    },
    onSuccess: async (oldData) => {
      await queryClient.invalidateQueries({ queryKey: ["profile"] });
    },
  });

  return (
    <div>
      <Toggle onClick={() => togglePrivacy()} disabled={isPending}>
        {profile.wishlist.private}
      </Toggle>
      ...
    </div>
  );
}

For some reason, when ever I trigger 'togglePrivacy' once, WishlistCTA gets into an infinite rerender loop. (console spam 'rendering cta').

Do you have any idea why?

Thanks in advance.

[TkDodo]

In client components, you need to get the queryClient with useQueryClient. Other than that, please show a minimal reproduction

[MathisEngels]

Hi @TkDodo, thanks for answering:

After a lot of debugging, I found what triggered the infinite re-render loop.

In WishlistPanel.tsx, I had a TanStack Table displaying profile related data.
Before displaying this data, I was doing something like:

export default function WishlistPanel() {
  const [itemQuery, profileQuery] = useSuspenseQueries({
    queries: [
      { queryKey: ["items"], queryFn: getItemsAPI(...) },
      { queryKey: ["profile"], queryFn: () => getProfile(someUUID) },
    ],
  });

  const items: WishlistItem[] = [];
  for (let i = 0; i < profileQuery.data.wishlist.items.length; i++) {
    const wishlistItem = profileQuery.data.wishlist.items[i];
    const item = itemQuery.data.find((item) => item.id === wishlistItem.name);
    if (item) {
      items.push({
        name: item.name,
        image: item.icon,
        priority: wishlistItem.priority,
      });
    }
  }

  const table = useReactTable<WishlistItem>({
    data: wishlistItems,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });
  
  ...

This for loop was creating a new items array, cause a re-render even if profileQuery.data didn't change.

Wrapping it with a useMemo simply fixed the problem.

const wishlistItems: WishlistItem[] = useMemo(() => {
  const items: WishlistItem[] = [];
  for (let i = 0; i < profileQuery.data.wishlist.items.length; i++) {
    const wishlistItem = profileQuery.data.wishlist.items[i];
    const item = itemQuery.data.find((item) => item.id === wishlistItem.name);
    if (item) {
      items.push({
        name: item.name,
        image: item.icon,
       priority: wishlistItem.priority,
      });
    }
  }
  return items;
}, [profileQuery.data.wishlist.items, itemQuery.data]);

Thanks again for looking into it @TkDodo.
Apologies for the confusion, the issue was on my end... 😞