i have an infinite loop within my hook but apps works as expected.

when i console log inside this hook, it repeats non-stop every few seconds, but my app is working as expected there is no infinite loop per say. i'm really confused with this one.

import zustand from ...

export function useGetTickets(tenantId?: any) {
  const setTickets = useTicketStore((state) => state.setTickets);
  const isApiError = useTicketStore((state) => state.isApiError);
  const setIsApiError = useTicketStore((state) => state.setIsApiError);

  const { isLoading, isError, data } =
    trpc.getTicketsWithPhotos.getAll.useQuery(undefined, {
      onSuccess: (data) => {
        console.log("data", data);
        setIsApiError(false);
        setTickets(data.tickets);
      },
      onError: (e) => {
        showToastCustomError(
          "Sever Error",
          "We cannot connect to our servers, please try again later or contact support",
          8000
        );
        setIsApiError(true);
        return console.error(e.message);
      },
    });

  return { data, isLoading, isApiError };
}

I think you're doing some strange stuff here

useQuery returns an object that returns most of what you're setting manually

The data, the status, errors, etc

I think you need to have a look at the react-query docs and look at the fundamentals

I agree i need to re-write this